From 695e4a085727ef5017597dd1ab72a47d0e9883e6 Mon Sep 17 00:00:00 2001
From: ludc
Date: 星期二, 30 五月 2023 19:19:55 +0800
Subject: [PATCH] 代码整合
---
Source/UBCS-WEB/src/components/Crud/Crud.vue | 213 ++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 160 insertions(+), 53 deletions(-)
diff --git a/Source/UBCS-WEB/src/components/Crud/Crud.vue b/Source/UBCS-WEB/src/components/Crud/Crud.vue
index 90412c5..aeccd29 100644
--- a/Source/UBCS-WEB/src/components/Crud/Crud.vue
+++ b/Source/UBCS-WEB/src/components/Crud/Crud.vue
@@ -1,30 +1,72 @@
<template>
-<basic-container style="height: 750px">
- <avue-crud ref="crud" :data="data" :option="option" style="height: 750px" @sort-change="sortChange"></avue-crud>
-</basic-container>
+ <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";
+import {MasterTable, TableData} from "@/api/GetItem";
+
export default {
name: "Crud.vue",
- data(){
- return{
- data:[
- {
- zhiliangbz:"111",
- },
- {
- xinghaoguige:"1121",
- },
- ],
- option:{
+ data() {
+ return {
+ editingRow:null,
+ editShow: "",
+ editAttr:"",
+ loading: false,
+ data: [],
+ option: {
//榛樿楂樺害,
- align:'center',
- menuAlign:'center',
- column:[]
+ align: 'center',
+ menuAlign: 'center',
+ addBtn: false,
+ editBtn: false,
+ selection: true,
+ selectionFixed: false,
+ index: true,
+ column: []
},
- List:[],
+ List: [],
columnType: {
text: "input",
combox: "select",
@@ -32,63 +74,128 @@
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()
+ this.CrudHeaderRend();
+ this.CrudRend()
},
activated() {
this.doLayout()
},
- methods:{
+ methods: {
+ // 鐩戝惉鍗曞厓鏍肩偣鍑讳簨浠跺苟瀛樺偍姝ｅ湪缂栬緫鐨勮
+ 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=>{
- console.log(item)
- let columnItem={
- label:item.title,
- prop:item.field,
- type:this.columnType[item.type],
- sortable:item.sort,
- width:item.minWidth
+ //琛ㄦ牸澶存覆鏌�
+ 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",
+ //琛ㄦ牸鏁版嵁
+ CrudRend() {
+ TableData({
+ templateOid: "A12826E4-2B66-6D56-DE30-92BB1D7F607F",
codeClassifyOid: "D9CF223F-317D-71EB-BD11-433A94CAD9F3",
- page: 1,
- limit: 9,
+ page: this.page.currentPage,
+ limit: this.page.pageSize,
_: 1685089123575
- }).then(res=>{
- console.log(res)
- this.data=res.data.data
+ }).then(res => {
+ this.page.total = res.data.total;
+ this.data = res.data.data;
+ this.tableData=res.data.data;
})
},
// 鎺掑簭
- sortChange(val){
- console.log(val)
-
- // TableData( {
- // templateOid: "A12826E4-2B66-6D56-DE30-92BB1D7F607F",
- // codeClassifyOid: "D9CF223F-317D-71EB-BD11-433A94CAD9F3",
- // order:"desc",
- // sort:val.prop
- // }).then(res=>{
- // console.log(res.data.data)
- // this.data=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)
+ }
}
}
</script>
--
Gitblit v1.9.3