From 33855a1961d581727cfbf59230085e6b95cc549c Mon Sep 17 00:00:00 2001
From: wangting <675591594@qq.com>
Date: 星期一, 29 四月 2024 15:56:37 +0800
Subject: [PATCH] action
---
Source/ProjectWeb/src/components/dynamic-components/dynamic-table.vue | 332 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 330 insertions(+), 2 deletions(-)
diff --git a/Source/ProjectWeb/src/components/dynamic-components/dynamic-table.vue b/Source/ProjectWeb/src/components/dynamic-components/dynamic-table.vue
index 59ce237..886e7f7 100644
--- a/Source/ProjectWeb/src/components/dynamic-components/dynamic-table.vue
+++ b/Source/ProjectWeb/src/components/dynamic-components/dynamic-table.vue
@@ -1,10 +1,338 @@
<template>
- <basic-container>琛ㄦ牸娴嬭瘯椤�</basic-container>
+ <div :id="'UI-dynamic-'+areasName+componentVO.oid" class="UI-dynamic">
+ <avue-crud ref="dataTable"
+ v-model="form"
+ :data="tableList"
+ :option="option"
+ :page.sync="pageType"
+ :table-loading="loading"
+ @on-load="onLoad"
+ @search-reset="searchReset"
+ @refresh-change="handleRefresh"
+ @current-change="currentChange"
+ @size-change="sizeChange"
+ @row-click="rowClickChange"
+ @search-change='searchChange'
+ @selection-change="selectChange">
+ <!--top鍖哄煙鎸夐挳-->
+ <template slot="menuLeft" slot-scope="scope">
+ <dynamic-button :componentVO="componentVO"
+ :key="areasName+'buttons-'+componentVO.oid"
+ :butttonList="componentVO.buttons" :dataStore="selectList" LocationType="top" :sourceData="sourceData"
+ type="table"></dynamic-button>
+ </template>
+
+ <!--menu鍖哄煙鎸夐挳-->
+ <template slot="menu" slot-scope="scope">
+ <dynamic-button :componentVO="componentVO" :butttonList="componentVO.buttons" :scope="scope" :dataStore="selectList" :sourceData="sourceData" LocationType="menu"
+ type="table"></dynamic-button>
+ </template>
+ </avue-crud>
+ </div>
</template>
<script>
+import {validatenull} from '@/util/validate'
+import {getList} from '@/api/base/ui'
+
export default {
- name: "dynamic-table"
+ name: "dynamic-table",
+ props: {
+ //ui涓婁笅鏂囩殑涓氬姟绫诲瀷锛堟垨閾炬帴绫诲瀷锛�
+ uiBtmType: {
+ type: String
+ },
+ //ui涓婁笅鏂�
+ uiContext:{
+ type: String
+ },
+ componentVO: {
+ type: Object,
+ default: {}
+ },
+ inDialog: {
+ type: Boolean,
+ default: false
+ },
+ canEdit:{
+ //鍐呭鏄惁鍙紪杈�
+ type:Boolean,
+ default:false
+ },
+ areasName: {
+ type: String,
+ default: ''//westArea瀵艰埅鍖�
+ },
+ sourceData: {
+ //鑿滃崟婧愭暟鎹垨鑰呭脊绐楁椂鎸夐挳鎵�灞炲尯鍩熺殑涓婁竴鍖哄煙閫変腑鏁版嵁
+ type: Object,
+ default: {}
+ },
+ //涓婁竴鍖哄煙涓氬姟绫诲瀷
+ sourceBtmType:{
+ type: String
+ },
+ paramVOS: {
+ type: Object,
+ default: {}
+ },
+ isShow: {
+ //鎵�鍦ㄥ尯鍩熸槸鍚﹀凡鏄剧ず锛岄拡瀵箃ab鍜宑ollapse
+ type: Boolean,
+ default: true
+ },
+ dataStore: {
+ //寮圭獥鏃舵寜閽墍灞炲尯鍩熼�変腑鏁版嵁
+ type: Array,
+ default: []
+ },
+ tableType: {
+ type: String
+ }
+ },
+ data() {
+ return {
+ currentDefineVO:this.componentVO.uiComponentType=='table'?this.componentVO.tableDefineVO:this.componentVO.treeTableDefineVO,
+ parentHeight: '100%',//褰撳墠缁勪欢鏍硅妭鐐瑰厓绱犻珮搴�
+ form: {},
+ query:{},
+ params:{},
+ loading: false,
+ page: {
+ pageSize: 10,
+ currentPage: 1,
+ total: 0,
+ },
+ simplePage: {
+ currentPage: 1,
+ total: 0,
+ pagerCount: 4,
+ layout: "prev, pager, next"
+ },
+ //琛ㄦ牸鏁版嵁
+ tableList: [],
+ option: {
+ index: true,
+ addBtn: false,
+ editBtn: false,
+ delBtn: false,
+ selection: true,
+ tip: false,
+ height: '100%',
+ calcHeight: 15,
+ indexFixed: false,
+ menuFixed: this.areasName === 'westArea' ? false : 'right',
+ searchMenuSpan:12,
+ searchShow:false,
+ column: [],
+ },
+ selectList: [],
+ columnType: {
+ text: "input",
+ combox: "select",
+ truefalse: "switch",
+ number: "number",
+ textarea: "textarea",
+ datetime: "datetime",
+ date: "date",
+ refer: "refer",
+ },
+ sourceDataMapParams:{}
+ }
+ },
+ computed: {
+ pageType() {
+ return this.areasName === 'westArea' ? this.simplePage : this.page;
+ }
+ },
+ watch: {
+ parentHeight: {
+ handler(newval) {
+ if (newval > 50) {
+ this.option.height = newval;
+ //doLayout涓嶇敓鏁堬紝鎵嬪姩璁剧疆琛ㄦ牸楂樺害
+ this.$children[0].$children[1].$children[1].$children[0].$el.style.height = newval + 'px';
+ /*this.$nextTick(() => {
+ if (this.$refs.dataTable && this.$refs.dataTable.doLayout) {
+ this.$refs.dataTable.doLayout();
+ }
+ })*/
+ }
+ }
+ },
+ isShow: {
+ handler(newval) {
+ if (newval && this.$el.clientHeight > 50) {
+ this.parentHeight = this.$el.clientHeight - this.$children[0].$children[1].$children[0].$el.clientHeight - this.$children[0].$children[2].$el.clientHeight - 5;
+ }
+ if(newval){
+ this.handleRefresh();
+ }
+ }
+ },
+ 'sourceData':{
+ handler(newval) {
+ if(newval) {
+ this.sourceDataMapParams=this.sourceDataMap();
+ this.getParams();
+ this.handleRefresh();
+ }
+ }
+ }
+ },
+ created() {
+ this.getParams();
+ this.option.column = this.updatedColumns();
+ if (this.componentVO.uiComponentType == 'TreeTable') {
+ //鏍戣〃
+ this.option.rowKey = this.currentDefineVO.treeCurrentField || 'oid';
+ this.option.rowParentKey = this.currentDefineVO.treeParentField || 'parentOid'
+ }
+ this.page = {
+ pageSize: this.currentDefineVO.pageVO ? this.currentDefineVO.pageVO.limit : 10,
+ currentPage: this.currentDefineVO.pageVO ? this.currentDefineVO.pageVO.page : 1,
+ total: 0,
+ pageSizes: this.currentDefineVO.limits || [10, 20, 30, 40, 50, 100]
+ };
+ },
+ mounted() {
+ if (this.$el.clientHeight > 50) {
+ //鐖跺厓绱犻珮搴�-鎸夐挳楂樺害-鍒嗛〉楂樺害
+ this.parentHeight = this.$el.clientHeight - this.$children[0].$children[1].$children[0].$el.clientHeight - this.$children[0].$children[2].$el.clientHeight - 5;
+ }
+ },
+ methods: {
+ updatedColumns: function () {
+ const queryFields = !validatenull(this.currentDefineVO.queryColumns) ? this.currentDefineVO.queryColumns.map(item => item.field) : [];
+ return this.currentDefineVO.cols[0].map(item => {
+ const search = queryFields.includes(item.field); // 鍒ゆ柇 field 鏄惁鍦� queryColumns 閲�
+ if (this.currentDefineVO.btmType == 'fileobject' && item.field == 'name') {
+ //鏄枃浠�
+ item.formatter = function (d) {
+ return '<a class="layui-btn layui-btn-intable" lay-event="PREVIEW">' + d.name + '</a>'
+ }
+ }
+ let formatter = item.formatter || item.templet;
+ if (typeof formatter == "string" && formatter != '') {
+ formatter = eval("(" + formatter + ")");
+ }
+ item.type = this.columnType[item.fieldType] || item.fieldType;
+ return {
+ ...item,
+ prop: item.field,
+ label: item.title,
+ search: search,
+ formatter: formatter
+ };
+ });
+ },
+ sourceDataMap: function () {
+ const sourceDataMap = {};
+ if (Object.keys(this.sourceData).length>0) {
+ if(this.sourceData.oid ) {
+ if (this.sourceData.oid.indexOf('@vcitreesep@') > -1) {
+ this.sourceData.oid = this.sourceData.oid.split('@vcitreesep@')[1];
+ }
+ sourceDataMap.sourceBtmName = this.sourceBtmType;;
+ sourceDataMap.sourceOid = this.sourceData.oid;
+ }
+ for (let i in this.sourceData) {
+ let item = this.sourceData[i]
+ if (item && item.constructor === Object) return;
+ if (i == 'type' || i == 'context' || i == 'content') return;
+ sourceDataMap['sourceData["' + i + '"]'] = item
+ }
+ }
+
+ if (Object.keys(this.paramVOS).length>0) {
+ for (let i in this.paramVOS) {
+ let item = this.paramVOS[i]
+ if (item && item.constructor === Object) return;
+ if (i == 'type' || i == 'context' || i == 'content') return;
+ sourceDataMap['sourceData["' + i + '"]'] = item
+ }
+ }
+ return sourceDataMap;
+ },
+ getParams: function () {
+ const tableParams = {
+ btmname: this.currentDefineVO.btmType,
+ btmType:this.currentDefineVO.btmType,
+ tableDefineId: this.currentDefineVO.id,
+ componentOid: this.componentVO.oid,
+ uiDefineId: this.uiContext,
+ linkTypeFlag: this.currentDefineVO.linkTypeFlag,
+ treeTableFlag:this.componentVO.uiComponentType == 'TreeTable'
+ };
+
+ const sourceDataMapList = this.sourceDataMapParams;
+
+ this.params = Object.assign({},tableParams, sourceDataMapList);
+ },
+ onLoad(page, params = {}) {
+ if (Object.keys(this.sourceData).length>0 && this.isShow) {
+ this.loading = true;
+ getList(page.currentPage, page.pageSize, Object.assign(params,this.params,this.query)).then(res => {
+ let data = [];
+ if (res.data && res.data.data) {
+ data = res.data.data;
+ this.page.total = res.data.total;
+ } else {
+ data = res.data;
+ this.page.total = res.total;
+ }
+ if (!data || data == null) {
+ data = [];
+ }
+ this.tableList = data;
+ this.loading = false;
+ this.selectionClear();
+ }).catch(error => {
+ this.$message.error(error);
+ this.loading = false;
+ });
+ }
+ },
+ rowClickChange(row){
+ this.$refs.dataTable.toggleRowSelection(row);
+ },
+ selectChange(row) {
+ this.selectList = row;
+ this.$emit("setDataStore", {
+ area: this.areasName,
+ type:this.componentVO.uiComponentType,
+ btmType:this.currentDefineVO.btmType,
+ dataStore:row
+ });
+ },
+ currentChange(currentPage) {
+ this.page.currentPage = currentPage;
+ },
+ sizeChange(pageSize) {
+ this.page.pageSize = pageSize;
+ },
+ searchChange(params,done){
+ this.query = params;
+ this.page.currentPage = 1;
+ this.onLoad(this.page);
+ done();
+ },
+ searchReset() {
+ this.query = {};
+ this.onLoad(this.page);
+ },
+ selectionClear() {
+ this.selectionList = [];
+ try {
+ this.$refs.dataTable.toggleSelection();
+ }catch (e) {
+
+ }
+ },
+ handleRefresh() {
+ this.onLoad(this.page, this.query);
+ }
+ }
}
</script>
--
Gitblit v1.9.3