From 859a64b36d107b147f44eccd0c0a76471c5e49ea Mon Sep 17 00:00:00 2001 From: 田源 <lastanimals@163.com> Date: 星期四, 15 六月 2023 18:20:39 +0800 Subject: [PATCH] 优化bug --- Source/UBCS-WEB/src/components/Crud/Crud.vue | 379 +++++++++++++++++++++++++++++++++++++++--------------- 1 files changed, 273 insertions(+), 106 deletions(-) diff --git a/Source/UBCS-WEB/src/components/Crud/Crud.vue b/Source/UBCS-WEB/src/components/Crud/Crud.vue index aeccd29..2f90814 100644 --- a/Source/UBCS-WEB/src/components/Crud/Crud.vue +++ b/Source/UBCS-WEB/src/components/Crud/Crud.vue @@ -1,69 +1,154 @@ <template> <basic-container> - <avue-crud ref="crud" - v-loading="loading" - :data="data" - :option="option" - :page="page" - @sort-change="sortChange" - @selection-change="selectionChange" - @on-load="onLoad"> - <template slot="menu"> - <el-button type="text">鏂囧瓧鎸夐挳</el-button> - </template> - <template slot="menuLeft"> - <div> - <el-table :data="tableData" style="width: 100%" @cell-click="handleCellClick" @cell-dblclick="dbclick"> - <div v-for="(item,index) in this.tableHeadData" :key="index"> - <el-table-column :label="item.label" :prop="item.prop"> -<!-- 缂栬緫鍜屽睍绀洪�昏緫 --> - <template slot-scope="{ row }"> - <el-input v-if="editingRow === row && editShow== item.prop" v-model="row[item.prop]" @blur="saveRow"></el-input> - <span v-else>{{row[item.prop]}}</span> - </template> - </el-table-column> - </div> - <el-table-column fixed="right" label="鎿嶄綔" width="120"> - <template slot-scope="scope"> - <el-button size="small" type="text" @click.native.prevent="enumDeleteRow(scope.$index, tableData)"> - 绉婚櫎 - </el-button> - </template> - </el-table-column> - </el-table> - <template> - <div style="display: flex;justify-content: right;margin-top: 15px"> - <el-button type="primary" size="small">淇濆瓨</el-button> - <el-button size="small" @click="enumVisible=false">鍙栨秷</el-button> - </div> - </template> + <div class="testbox"> + <div style="margin-top: 10px;display: flex;flex-wrap: wrap;width: 100%;"> + <el-button size="small" type="primary" plain @click="addvisible=true">澧炲姞 + <FormTemplateDialog + :visible.sync="addvisible" + :type="add" + :templateOid="templateOid" + :codeClassifyOid="this.codeClassifyOid" + :codeRuleOid="this.codeRuleOid" + :disabledProp="disabledProp" + > + </FormTemplateDialog></el-button> + <el-button size="small" type="primary" plain @click="editvisible=true">缂栬緫 + <FormTemplateDialog + :visible.sync="editvisible" + :type="edit" + :templateOid="templateOid" + :codeClassifyOid="this.codeClassifyOid" + :codeRuleOid="this.codeRuleOid" + :disabledProp="disabledProp" + :rowOid="rowOid" + ></FormTemplateDialog></el-button> + <el-button size="small" type="primary" plain>鎵归噺瀵煎叆鐢宠</el-button> + <el-button size="small" type="primary" plain>鍘嗗彶鏁版嵁瀵煎叆</el-button> + <el-button size="small" type="primary" plain>鎵归噺鐢宠缂栫爜</el-button> + <el-button size="small" type="primary" plain>鎵归噺鍙戝竷</el-button> + <el-button size="small" type="primary" plain>鏌ョ湅娴佺▼鍘嗗彶</el-button> + <el-button size="small" type="primary" plain>鍒犻櫎</el-button> + <el-button size="small" type="primary" plain>鍙戝竷</el-button> + <el-button size="small" type="primary" plain>鏁版嵁鏇存敼</el-button> + <el-button size="small" type="primary" plain @click="huishouHandler">鍥炴敹</el-button> + <el-button size="small" type="primary" plain @click="openD">瀵煎嚭 + <integration-transfer :visible.sync="dialogPush" :data="transferData" + :props="transferProps" @save="handelTransferSave"></integration-transfer> + </el-button> + <el-button size="small" type="primary" plain @click="findvisible=true">鏌ヨ + <advanced-query :visible.sync="findvisible" :options="this.options"></advanced-query> + </el-button> + <el-button size="small" type="primary" plain>鐩镐技椤规煡璇�</el-button> + <el-button size="small" type="primary" plain style="margin-left: 1px;margin-top:10px">鍒锋柊</el-button> + <el-input placeholder="璇疯緭鍏ュ叧閿瓧鎸夊洖杞︽煡璇�" style="width: 180px;margin-left: 5px;margin-top:10px" size="small"></el-input> + </div> + <el-row style="height: 700px;width: 100%"> + <el-table :data="tableData" style="" @cell-click="handleCellClick" max-height="700" v-loading="isLoading" @selection-change="handleSelectionChange" @sort-change="sortChange"> + <el-table-column + type="selection" + fixed + width="55"> + </el-table-column> + <el-table-column + type="index" + fixed + label="搴忓彿" + width="55"> + </el-table-column> + <div v-for="(item,index) in this.tableHeadData" :key="index"> + <el-table-column :label="item.label" :prop="item.prop" :sortable="item.sortable" :width="item.width"> + <!-- 缂栬緫鍜屽睍绀洪�昏緫 --> + <template slot-scope="{ row }"> + <el-input v-if="editingRow === row && editShow== item.prop" v-model="row[item.prop]" @blur="saveRow"></el-input> + <span v-else>{{row[item.prop]}}</span> + <el-switch + v-if="editShow === 'true'" + v-model="row[item.prop]" + active-color="#13ce66" + inactive-color="#ff4949"> + </el-switch> + </template> + </el-table-column> </div> - </template> - </avue-crud> + </el-table> + </el-row> + </div> + <div class="block" style="display: flex;justify-content: flex-end"> + <el-pagination + @size-change="handleSizeChange" + @current-change="handleCurrentChange" + :current-page="page.currentPage" + :page-sizes="page.pageSizes" + :page-size="page.pageSizes" + layout="total, sizes, prev, pager, next, jumper" + :total="page.total"> + </el-pagination> + </div> </basic-container> </template> - <script> import {MasterTable, TableData} from "@/api/GetItem"; - +import {listCodeAttributeByClassId} from '@/api/integration/integration.js' +import integrationTransfer from '@/views/integration/integrationTransfer' +import pinyin from "js-pinyin"; export default { + components: { + integrationTransfer + }, name: "Crud.vue", + props:{ + page:{ + type: Object, + default: ()=>{ + return {} + } + }, + codeClassifyOid:{ + type:String, + default:"" + }, + coderuleoid:{ + type:String, + default:"" + }, + tableDataArray:{ + type:Array, + }, + total:{ + type:String, + default:"" + }, + templateOid:{ + type:String, + }, + tableHeadDataFateher:{ + type:Array, + }, + isLoading:{ + type:Boolean, + default:false + } + }, data() { return { + transferData:[], + transferProps: { + key: 'oid', + label: 'name' + }, + templateOid:"", + addvisible:false, + editvisible:false, + findvisible:false, + dialogPush:false, + rowOid: '6EF696C3-CD87-0E7C-1EA1-8DE3913A95C9', + disabledProp: ["id"], editingRow:null, editShow: "", editAttr:"", - loading: false, data: [], + options:{}, option: { - //榛樿楂樺害, - align: 'center', - menuAlign: 'center', - addBtn: false, - editBtn: false, - selection: true, - selectionFixed: false, - index: true, column: [] }, List: [], @@ -74,42 +159,100 @@ number: "number", datetime: "datetime", }, - page: { - total: 0, - currentPage: 1, - pageSize: 10, - pageSizes: [10, 30, 50, 100, 200], - }, tableData:[], tableHeadData:[], - items:{} + items:{}, + seniorQueryColumns:[] } }, computed:{ - editable(){ - this.tableData.forEach(item=>{ - this.items=item - }) - return this.editShow === this.editingRow[this.items.prop]; - } }, created() { - this.CrudHeaderRend(); - this.CrudRend() + // this.CrudHeaderRend(); + // this.tableHeadHandle() + }, + mounted() { + }, activated() { this.doLayout() }, + watch:{ + codeClassifyOid:{ + handler(newval,oldval){ + this.codeClassifyOid=newval; + this.CrudHeaderRend() + }, + deep:true + }, + tableDataArray:{ + handler(newval,oldval){ + this.tableData=newval; + // + } + }, + total:{ + handler(newval,oldval){ + this.page.total=newval; + } + }, + tableHeadDataFateher:{ + handler(newval,oldval){ + let List=newval.tableDefineVO.cols[0]; + List.forEach(item=>{ + let columnItem = { + label: item.title, + prop: item.field, + type: this.columnType[item.type], + sortable: item.sort, + width: item.minWidth + }; + this.option.column.push(columnItem); + this.option.column=this.tableHeadData; + }) + } + } + }, methods: { + huishouHandler(){ + console.log('tem',this.templateOid) + console.log('table',this.tableData) + console.log('tabheadle',this.tableHeadData) + console.log('tableFather',this.tableHeadDataFateher) + }, + openD(){ + this.dialogPush=true; + this.getListCodeByClassId() + }, + async getListCodeByClassId() { + this.transferData = [] + const response = await listCodeAttributeByClassId({ codeClassifyId: this.codeClassifyOid }) + if (response.status === 200) { + const data = response.data.data + this.transferData = data + } + }, + rend(){ + this.tableData=this.tableHeadData + }, + handleSizeChange(val){ + this.page.pageSize=val + this.$emit('pageSize',val) + this.CrudRend() + }, + handleCurrentChange(val){ + this.page.currentPage=val + this.$emit('currentPage',val) + this.CrudRend() + }, // 鐩戝惉鍗曞厓鏍肩偣鍑讳簨浠跺苟瀛樺偍姝e湪缂栬緫鐨勮 handleCellClick(row, column) { this.editingRow = row; this.editShow = column.property; - console.log( this.editingRow['name'], this.editShow) + this.rowOid=row.oid }, - //鏋氫妇娉ㄥ叆鍒犻櫎 + //鍒犻櫎 enumDeleteRow(row) { - console.log(row) this.tableData.splice(row, 1) }, // 灏嗘鍦ㄧ紪杈戠殑琛岀殑鐘舵�佸彉涓� null 锛屽嵆閫�鍑虹紪杈戠姸鎬� @@ -121,44 +264,62 @@ this.$refs.crud.doLayout(); }); }, + tableHeadHandle(){ + this.options=this.tableHeadDataFateher.tableDefineVO.seniorQueryColumns + this.List = this.tableHeadDataFateher.tableDefineVO.cols[0]; + this.List.forEach(item => { + let columnItem = { + label: item.title, + prop: item.field, + type: this.columnType[item.type], + sortable: item.sort, + width: item.minWidth + }; + this.option.column.push(columnItem); + this.option.column=this.tableHeadData; + }) + }, //琛ㄦ牸澶存覆鏌� CrudHeaderRend() { - MasterTable({ - codeClassifyOid: "D9CF223F-317D-71EB-BD11-433A94CAD9F3", - functionId: 5, - _: 1685067339479 - }).then(res => { - this.List = res.data.tableDefineVO.cols[0]; - this.List.forEach(item => { - let columnItem = { - label: item.title, - prop: item.field, - type: this.columnType[item.type], - sortable: item.sort, - width: item.minWidth - }; - this.option.column.push(columnItem); - this.option.column=this.tableHeadData; + if(this.codeClassifyOid != ""){ + MasterTable({ + codeClassifyOid:this.codeClassifyOid, + functionId: 5, + }).then(res => { + this.options=res.data.tableDefineVO.seniorQueryColumns + this.List = res.data.tableDefineVO.cols[0]; + this.List.forEach(item => { + let columnItem = { + label: item.title, + prop: item.field, + type: this.columnType[item.type], + sortable: item.sort, + width: item.minWidth + }; + this.option.column.push(columnItem); + this.option.column=this.tableHeadData; + this.templateOid=res.data.tableDefineVO.oid + this.$emit('templateOid',this.templateOid) + }) }) - }) + } }, //琛ㄦ牸鏁版嵁 CrudRend() { - TableData({ - templateOid: "A12826E4-2B66-6D56-DE30-92BB1D7F607F", - codeClassifyOid: "D9CF223F-317D-71EB-BD11-433A94CAD9F3", - page: this.page.currentPage, - limit: this.page.pageSize, - _: 1685089123575 - }).then(res => { - this.page.total = res.data.total; - this.data = res.data.data; - this.tableData=res.data.data; - }) + TableData({ + templateOid: this.templateOid, + codeClassifyOid: this.codeClassifyOid, + page: this.page.currentPage, + limit: this.page.pageSize, + }).then(res => { + this.page.total = res.data.total; + this.data = res.data.data; + this.tableData=res.data.data; + }) }, // 鎺掑簭 sortChange(val) { - this.loading = true; + this.isLoading = true; let order = "" if (val.order == "ascending") { order = "asc"; @@ -166,8 +327,8 @@ order = "desc"; } TableData({ - templateOid: "A12826E4-2B66-6D56-DE30-92BB1D7F607F", - codeClassifyOid: "D9CF223F-317D-71EB-BD11-433A94CAD9F3", + templateOid: this.templateOid, + codeClassifyOid: this.codeClassifyOid, order: order, sort: val.prop, page: this.page.currentPage, @@ -175,31 +336,37 @@ }).then(res => { setTimeout(() => { this.data = res.data.data; - this.loading = false; + this.isLoading = false; }, 100); }) }, //鍒嗛〉鍒锋柊 async onLoad(val) { - console.log(val) await TableData({ - templateOid: "A12826E4-2B66-6D56-DE30-92BB1D7F607F", - codeClassifyOid: "D9CF223F-317D-71EB-BD11-433A94CAD9F3", + templateOid: this.templateOid, + codeClassifyOid: this.codeClassifyOid, page: val.currentPage, limit: val.pageSize, - _: 1685089123575 }).then(res => { this.data = res.data.data; }) }, //澶氶�� - selectionChange(row) { + handleSelectionChange(row) { console.log(row) } } } </script> -<style scoped> +<style lang="scss" scoped> +.testbox { + .el-table--scrollable-x .el-table__body-wrapper { + overflow: auto !important; + } + .el-table__fixed-right-patch { + background-color: #f5f7fa !important; + } +} </style> -- Gitblit v1.9.3