数据模型和标签管理

shuishen

2024-01-09 89ba20798d5750c454bdf7aa5040276bec85e7ed

 src/views/userHouse/lable/list.vue

@@ -1,180 +1,185 @@
<template>
 <el-row>
   <el-col :span="24">
     <basicContainer>
       <avue-crud ref="crud" :option="option" :before-open="beforeOpen" :before-close="beforeClose" :data="data"
         @tree-load="treeLoad" @row-save="rowSave" @row-del="rowDel" @refresh-change="refreshChange" @row-update="rowUpdate"
         @on-load="onLoad">
         <template #menu="{row,size}">
           <el-button :size="size" type="text" icon="el-icon-circle-plus-outline" size="small" @click="handleAdd(row)">新增子级
           </el-button>
         </template>
       </avue-crud>
     </basicContainer>
   </el-col>
    <el-row>
        <el-col :span="24">
            <basicContainer>
                <avue-crud ref="crud" :option="option" :before-open="beforeOpen" :before-close="beforeClose" :data="data"
                    @tree-load="treeLoad" @row-save="rowSave" @row-del="rowDel" @refresh-change="refreshChange"
                    @row-update="rowUpdate" @on-load="onLoad">

 </el-row>
                    <template slot-scope="{row, size}" slot="menu">
                        <el-button :size="size" type="text" icon="el-icon-circle-plus-outline" @click="handleAdd(row)">新增子级
                        </el-button>
                    </template>

                </avue-crud>
            </basicContainer>
        </el-col>

    </el-row>
</template>
<script>
  import {
import {
    getTreeList,
    add,
    update,
    remove
  } from '@/api/label/label'
} from '@/api/label/label'

  export default {
    data() {
      return {
        query: {
          parentId: 0
        },
        data: [],
        loading: true,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        parentId: undefined,
        option: {
          lazy: true,
          rowKey: 'id',
          defaultExpandAll:true,
          column: [{
            label: '名称',
            prop: 'name'
          }, {
            label: 'ID',
            prop: 'id',
            display: false
          }, {
            label: '排序',
            prop: 'sort',
          }, {
            label: '父级id',
            prop: 'parentId',
            type: "tree",
            dicData: [],
            hide: true,
            addDisabled: false,
            props: {
              label: "name",
              value: 'id'
export default {
    data () {
        return {
            query: {
                parentId: 0
            },
          }]
        },
        data1: [],
        selectionList: [],
      }
            data: [],
            loading: true,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0
            },
            parentId: undefined,
            option: {
                labelWidth: 96,
                searchLabelWidth: 96,
                menuWidth: 240,

                lazy: true,
                rowKey: 'id',
                defaultExpandAll: true,
                column: [{
                    label: '名称',
                    prop: 'name'
                }, {
                    label: 'ID',
                    prop: 'id',
                    display: false
                }, {
                    label: '排序',
                    prop: 'sort',
                }, {
                    label: '父级id',
                    prop: 'parentId',
                    type: "tree",
                    dicData: [],
                    hide: true,
                    addDisabled: false,
                    props: {
                        label: "name",
                        value: 'id'
                    },
                }]
            },
            data1: [],
            selectionList: [],
        }
    },

    methods: {

      refreshChange() {
        this.onLoad();
      },
        refreshChange () {
            this.onLoad()
        },

      beforeOpen(done, type) {
        if (["add", "edit"].includes(type)) {
          this.initData();
        beforeOpen (done, type) {
            if (["add", "edit"].includes(type)) {
                this.initData()
            }
            done()
        },

        beforeClose (done) {
            this.parentId = ""
            const column = this.findObject(this.option.column, "parentId")
            column.value = ""
            column.addDisabled = false
            done()
        },

        initData () {
            const column = this.findObject(this.option.column, "parentId")
            column.dicData = this.data
        },

        selectionClear () {
            this.selectionList = []
        },

        onLoad (page, params = {}) {
            this.loading = true
            getTreeList().then(res => {
                const data = res.data.data
                this.data = data
                this.loading = false
                this.selectionClear()
            })
        },

        rowDel (row, index, done) {
            console.log("*************")
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    return remove(row.id)
                })
                .then(() => {
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    })
                    done(row)
                })
        },

        rowSave (row, done) {
            row.parentId = this.parentId
            row.labelName = row.name
            add(row).then(() => {
                this.initFlag = false
                this.onLoad(this.page)
                this.$message({
                    type: "success",
                    message: "操作成功!"
                })
                done()
            }, error => {
                window.console.log(error)
                loading()
            })
        },

        rowUpdate (row, index, done) {
            const column = this.findObject(this.option.column, "parentId")
            column.value = row.id
            done(row)
        },

        handleAdd (row) {
            const column = this.findObject(this.option.column, "parentId")
            column.value = row.id
            column.addDisabled = true
            this.parentId = row.id
            this.$refs.crud.rowAdd()
        },

        treeLoad (tree, treeNode, resolve) {
            setTimeout(() => {
                resolve([{
                    id: new Date().getTime(),
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄',
                    hasChildren: true
                }])
            }, 1000)
        }
        done();
      },

      beforeClose(done) {
        this.parentId = "";
        const column = this.findObject(this.option.column, "parentId");
        column.value = "";
        column.addDisabled = false;
        done();
      },

      initData() {
        const column = this.findObject(this.option.column, "parentId");
        column.dicData = this.data;
      },

      selectionClear() {
        this.selectionList = [];
      },

      onLoad(page, params = {}) {
        this.loading = true;
        getTreeList().then(res => {
          const data = res.data.data;
          this.data = data;
          this.loading = false;
          this.selectionClear();
        });
      },

      rowDel(row, index, done) {
        console.log("*************")
        this.$confirm("确定将选择数据删除?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            return remove(row.id);
          })
          .then(() => {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            done(row);
          });
      },

      rowSave(row, done) {
        row.parentId = this.parentId;
        row.labelName = row.name
        add(row).then(() => {
          this.initFlag = false;
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
        }, error => {
          window.console.log(error);
          loading();
        });
      },

      rowUpdate(row, index, done) {
        const column = this.findObject(this.option.column, "parentId");
        column.value = row.id;
        done(row)
      },

      handleAdd(row) {
        const column = this.findObject(this.option.column, "parentId");
        column.value = row.id;
        column.addDisabled = true;
        this.parentId = row.id
        this.$refs.crud.rowAdd()
      },

      treeLoad(tree, treeNode, resolve) {
        setTimeout(() => {
          resolve([{
            id: new Date().getTime(),
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
            hasChildren: true
          }])
        }, 1000)
      }
    }
  }
}
</script>



<style>
</style>
<style></style>