From 02bc9fafc73080c4c055af6a63dba94a39e81315 Mon Sep 17 00:00:00 2001 From: zhangxp <zhangxp@chicecm.com> Date: 星期二, 30 五月 2023 18:17:09 +0800 Subject: [PATCH] 集成默认页面 --- Source/UBCS-WEB/src/components/Crud/Crud.vue | 196 +++++++++++++++++++++++++++++++++++++++++++++++- 1 files changed, 191 insertions(+), 5 deletions(-) diff --git a/Source/UBCS-WEB/src/components/Crud/Crud.vue b/Source/UBCS-WEB/src/components/Crud/Crud.vue index 30b5efe..aeccd29 100644 --- a/Source/UBCS-WEB/src/components/Crud/Crud.vue +++ b/Source/UBCS-WEB/src/components/Crud/Crud.vue @@ -1,14 +1,200 @@ <template> - <avue-crud :data="data" ></avue-crud> + <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> + </template> + </avue-crud> + </basic-container> </template> <script> +import {MasterTable, TableData} from "@/api/GetItem"; + export default { name: "Crud.vue", - data(){ - return{ - data:[], - option:{} + data() { + return { + editingRow:null, + editShow: "", + editAttr:"", + loading: false, + data: [], + option: { + //榛樿楂樺害, + align: 'center', + menuAlign: 'center', + addBtn: false, + editBtn: false, + selection: true, + selectionFixed: false, + index: true, + column: [] + }, + List: [], + columnType: { + text: "input", + combox: "select", + truefalse: "switch", + number: "number", + datetime: "datetime", + }, + page: { + total: 0, + currentPage: 1, + pageSize: 10, + pageSizes: [10, 30, 50, 100, 200], + }, + tableData:[], + tableHeadData:[], + items:{} + } + }, + computed:{ + editable(){ + this.tableData.forEach(item=>{ + this.items=item + }) + return this.editShow === this.editingRow[this.items.prop]; + } + }, + created() { + this.CrudHeaderRend(); + this.CrudRend() + }, + activated() { + this.doLayout() + }, + methods: { + // 鐩戝惉鍗曞厓鏍肩偣鍑讳簨浠跺苟瀛樺偍姝e湪缂栬緫鐨勮 + handleCellClick(row, column) { + this.editingRow = row; + this.editShow = column.property; + console.log( this.editingRow['name'], this.editShow) + }, + //鏋氫妇娉ㄥ叆鍒犻櫎 + enumDeleteRow(row) { + console.log(row) + this.tableData.splice(row, 1) + }, + // 灏嗘鍦ㄧ紪杈戠殑琛岀殑鐘舵�佸彉涓� null 锛屽嵆閫�鍑虹紪杈戠姸鎬� + saveRow() { + this.editingRow = null; + }, + doLayout() { + this.$nextTick(() => { + this.$refs.crud.doLayout(); + }); + }, + //琛ㄦ牸澶存覆鏌� + 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; + }) + }) + }, + //琛ㄦ牸鏁版嵁 + 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; + }) + }, + // 鎺掑簭 + sortChange(val) { + this.loading = true; + let order = "" + if (val.order == "ascending") { + order = "asc"; + } else { + order = "desc"; + } + TableData({ + templateOid: "A12826E4-2B66-6D56-DE30-92BB1D7F607F", + codeClassifyOid: "D9CF223F-317D-71EB-BD11-433A94CAD9F3", + order: order, + sort: val.prop, + page: this.page.currentPage, + limit: this.page.pageSize, + }).then(res => { + setTimeout(() => { + this.data = res.data.data; + this.loading = false; + }, 100); + }) + }, + //鍒嗛〉鍒锋柊 + async onLoad(val) { + console.log(val) + await TableData({ + templateOid: "A12826E4-2B66-6D56-DE30-92BB1D7F607F", + codeClassifyOid: "D9CF223F-317D-71EB-BD11-433A94CAD9F3", + page: val.currentPage, + limit: val.pageSize, + _: 1685089123575 + }).then(res => { + this.data = res.data.data; + }) + }, + //澶氶�� + selectionChange(row) { + console.log(row) } } } -- Gitblit v1.9.3