tire-platform-ui/src/views/tirePartsMall/basicData/listingManagement/index.vue

<template>
  <div>
    <basic-container>
      <el-row>
        <el-col :span="4">
          <avue-tree ref="treeRef" :option="treeOption" :data="treeData" @node-click="nodeClick" style="height:73vh;"
            @save="corpTypeVisible = true">
          </avue-tree>
        </el-col>
        <el-col :span="20">
          <avue-crud :option="option" :search.sync="search" v-model="form" :table-loading="loading" :data="dataList"
            ref="crud" :key="key" @on-load="onLoad" @selection-change="selectionChange" :before-open="beforeOpen"
            @row-update="rowUpdate" @search-change="searchChange" @search-reset="resetChange"
            @refresh-change="refreshChange" @row-del="rowDel"
            @resetColumn="resetColumnTwo('crud', 'option', 'optionList', 273)"
            @saveColumn="saveColumnTwo('crud', 'option', 'optionList', 273)" :page.sync="page">
            <template slot="filesListForm">
              <span style="font-size: 12px;">(图片文件像素推荐700X750，有且只允许有一张主图，其余均为副图)</span>
              <c-upload :data="form.filesList" display basic deleteUrl="/api/blade-sales-part/productLaunchFiles/remove"
                :enumerationValue="160" />

            </template>

            <template slot="detailsTextForm">
              <avue-ueditor v-model="form.detailsText" :options="optionsUeditor"></avue-ueditor>
            </template>
            <template slot-scope="{type,size,row,index}" slot="menu">
              <el-button :size="size" :type="type" :disabled="row.upAndDownShelves"
                @click="$refs.crud.rowEdit(row, index)">编辑
              </el-button>
              <el-button :size="size" :type="type" :disabled="row.upAndDownShelves"
                @click="$refs.crud.rowDel(row, index)">删除
              </el-button>
              <el-tooltip :content="`${row.upAndDownShelves == 0 ? '上架' : '下架'}`" placement="top">
                <el-switch style="margin-left: 10px" v-model="row.upAndDownShelves" @change="check(row)" :active-value="1"
                  :inactive-value="0">
                </el-switch>
              </el-tooltip>
            </template>

            <template slot-scope="{type,size,row,$index}" slot="menuLeft">
              <el-button type="primary" icon="el-icon-plus" size="small" @click="commoditySelection">选择产品
              </el-button>
              <el-button class="el-icon-bottom" type="warning" size="small" @click="excelBox = true">
                导入
              </el-button>
              <el-button class="el-icon-document-copy" :disabled="selectionList.length === 0" type="primary" size="small"
                @click="change(row, 'up')">批量上架
              </el-button>
              <el-button class="el-icon-document-copy" :disabled="selectionList.length === 0" type="danger" size="small"
                @click="change(row, 'down')">批量下架
              </el-button>
            </template>
          </avue-crud>
        </el-col>
      </el-row>
    </basic-container>
    <el-dialog title="选择产品" v-if="dialogVisibles" append-to-body class="el-dialogDeep" :visible.async="dialogVisibles" width="80%"
      :close-on-click-modal="false" :destroy-on-close="true" :close-on-press-escape="false" @close="dialogVisibles = false">
      <el-row :style="{ height: rowHeight }">
          <el-col :span="5" style="height: 100%;overflow-y: auto">
              <div>
                  <el-scrollbar>
                      <basic-container>
                          <avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick" />
                      </basic-container>
                  </el-scrollbar>
              </div>
          </el-col>
        <el-col :span="19">
          <!-- <basic-container> -->
            <avue-crud :option="optionTwo" :table-loading="loading" :data="goodsListShow" ref="cruds"
              @refresh-change="refreshChangeCost" @selection-change="selectionChangeCost" @search-change="goodsSearchCost"
              :page.sync="pages" @on-load="onLoad"  @saveColumn="saveGoodsColumn"
              @resetColumn="resetGoodsColumn">
              <template slot="menuLeft">
                <el-tabs v-model="activeName" @tab-click="tabHandle">
                  <el-tab-pane label="查询结果" name="searchList" />
                  <el-tab-pane label="已选定数据" name="importStaging" />
                </el-tabs>
              </template>
              <template slot="priceOne" slot-scope="{row}">
                <el-input v-model="row.priceOne" size="small" :controls="false" :precision="0"
                  style="width: 100%" />
              </template>
              <template slot="priceTwo" slot-scope="{ row }">
                <el-input v-model="row.priceTwo" size="small"></el-input>
                <!-- <span v-else>{{ row.refreshChange | IntegerFormat }}</span> -->
              </template>
                <!--花纹-->
                <template slot-scope="{row}" slot="brandItem">
                    <!--<el-select-->
                    <!--    v-model="row.brandItem"-->
                    <!--    multiple-->
                    <!--    filterable-->
                    <!--    remote-->
                    <!--    reserve-keyword-->
                    <!--    placeholder="请输入关键词"-->
                    <!--    :remote-method="remoteMethod"-->
                    <!--    :loading="loading">-->
                    <!--    <el-option-->
                    <!--        v-for="item in goodsListShow"-->
                    <!--        :key="item.value"-->
                    <!--        :label="item.brandItem"-->
                    <!--        :value="item.value">-->
                    <!--    </el-option>-->
                    <!--</el-select>-->
                </template>
              <template slot="priceThree" slot-scope="{ row }">
                <el-input v-model="row.priceThree" size="small"></el-input>
                <!-- <span v-else>{{ row.refreshChange | IntegerFormat }}</span> -->
              </template>
              <template slot="priceFour" slot-scope="{ row }">
                <el-input v-model="row.priceFour" size="small"></el-input>
                <!-- <span v-else>{{ row.refreshChange | IntegerFormat }}</span> -->
              </template>
              <template slot="sharedCompany" slot-scope="{ row, index }">
                <span style="display:flex">
                  <el-select v-model="row.sharedCompany" multiple placeholder="请选择" size="small" filterable
                    style="width:60%">
                    <el-option v-for="item in sharedCompanyoptions" :key="item.id" :label="item.fullName"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </span>
              </template>
              <template slot-scope="scope" slot="menu">
                <el-button type="text" icon="el-icon-edit" size="small"
                  @click.stop="importStagList(scope.row, scope.index)" v-if="activeName == 'searchList'"
                  :disabled="goodsListSave.findIndex(item => item.id == scope.row.id) !== -1">选择
                </el-button>
                <el-button type="text" icon="el-icon-delete" size="small"
                  @click.stop="removeStagList(scope.row, scope.index)" v-else>移除
                </el-button>
              </template>
            </avue-crud>
          <!-- </basic-container> -->
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibles = false" :loading="saveLoading">取 消</el-button>
        <el-button type="primary" @click="importGoods" v-if="commodityData !== true" :loading="saveLoading">导入</el-button>
        <el-button type="primary" @click="importChoice" v-if="commodityData === true" :loading="saveLoading"
          :disabled="tableData.length !== 1">导入</el-button>
      </span>
    </el-dialog>
    <el-dialog title="添加产品" v-if="excelBox" append-to-body :visible.sync="excelBox" :close-on-click-modal="false" width="555px">
      <avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter">
        <template slot="excelTemplate">
          <el-button type="primary" @click="derivation">
            点击下载<i class="el-icon-download el-icon--right"></i>
          </el-button>
        </template>
      </avue-form>
      <p style="text-align: center;color: #DC0505">
        温馨提示 第一次导入时请先下载模板
      </p>
    </el-dialog>
  </div>
</template>

<script>
import {
    getList,
    groundingList,
    submit,
    batchOperationProductLaunch,
    getDetail,
    remove,
    productLaunch,
    deptList, listAllP
} from "@/api/tirePartsMall/basicData/listingManagement/index.js";
import { getToken } from "@/util/auth";
import commodity from "./commodity.json"
export default {
  name: "index",
  data() {
    return {
      data: [],
      sharedCompanyoptions: [],
      activeName: 'searchList',
      dialogVisibles: false,
      selectedNodes: [],// 存储选择节点的数组
      tableData: [],
      //上架列表
      goodsListShow: [],
      // 商品列表暂存
      goodsListSave: [],
      goodsListPolicy: [],
      optionsUeditor: {
        //普通上传地址
        // action:'https://avuejs.com/imgupload',
        action: "/api/blade-resource/oss/endpoint/put-file",
        headers: { "Blade-Auth": "Bearer " + getToken() },
        props: {
          res: "data",
          url: 'link'
        }
      },
      optionTwo: commodity,
      excelForm: {},
      excelOption: {
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: "模板下载",
            prop: "excelTemplate",
            formslot: true,
            span: 24
          },
          {
            label: "模板上传",
            prop: "excelFile",
            type: "upload",
            drag: true,
            loadText: "模板上传中，请稍等",
            span: 24,
            propsHttp: {
              res: "data"
            },
            tip: "请上传 .xls,.xlsx 标准格式文件",
            action: "/api/blade-sales-part/productLaunch/import-productLaunch"
          }
        ]
      },
      treeOption: {
        addBtn: false,
        menu: false,
        size: "small",
        props: {
          labelText: "标题",
          label: "cname",
          value: "id",
        }
      },
      excelBox: false,
      corpTypeVisible: false,
        // 左侧搜索
      treeData: [],
      loading: false,
      search: {},
      form: {},
      dataList: [],
      selectionList: [],
      page: {
        pageSize: 20,
        currentPage: 1,
        total: 0,
        pageSizes: [10, 20, 30, 40, 50, 100, 200, 300, 400, 500]
      },
      pageList: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      key: 0,
      option: {},
      optionList: {
        viewBtn: false,
        editBtn: false,
        delBtn: false,
        addBtn: false,
        index: true,
        span: 8,
        border: true,
        selection: true,
        height: "auto",
        updateBtnText:'保存',
        searchMenuPosition: "right",
        align: "center",
        menuWidth: 150,
        searchSpan: 8,
        searchIcon: true,
        searchIndex: 2,
        highlightCurrentRow: true,
        dialogWidth: "90%",
        column: [{
          label: '轮胎名称',
          prop: 'cname',
          search: true,
          disabled: true,
          overHidden: true,
        }, {
          label: '规格型号',
          prop: 'specificationAndModel',
          disabled: true,
          search: true,
          overHidden: true,
        },{
          label: '花纹',
          prop: 'brandItem',
          disabled: true,
          search: true,  // 是否搜索
          // type: 'select',
          // remote:true, // 是否为远程搜索
          // dicUrl:'/api/blade-sales-part/productLaunch/list?brandItem={{key}}',   //key为当前输入值
          overHidden: true,
        }, {
          label: '公司',
          prop: 'salesCompanyName',
          disabled: true,
          overHidden: true,
          type: 'select',
          props: {
            label: 'fullName',
            value: 'id'
          },
          dicUrl: '/api/blade-system/dept/top-list'
        }, {
          label: '库存',
          prop: 'inventory',
          disabled: true,
          overHidden: true,
        }, {
          label: '产品状态',
          prop: 'upAndDownShelves',
          filterable: true,
          display: false,
          search: true,
          hide: true,
          disabled: true,
          showColumn: false,
          type: 'select',
          dicData: [{
            label: "上架",
            value: 1
          }, {
            label: "下架",
            value: 0
          }]
        }, {
          label: "品牌",
          prop: "brandName",
          disabled: true,
          overHidden: false,
        }, {
          label: "售价1",
          prop: "priceOne",
          hide: false,
          overHidden: true,
        }, {
          label: "售价2",
          prop: "priceTwo",
          hide: false,
          overHidden: true,
        }, {
          label: "售价3",
          prop: "priceThree",
          hide: false,
          overHidden: true,
        }, {
          label: "售价4",
          prop: "priceFour",
          hide: false,
          overHidden: true,
        },
        {
          label: "共享公司",
          prop: "sharedCompany",
          // searchProp: "sharedCompanyList",
          search: true,
          overHidden: true,
          // tags: true,
          multiple: true,   //将可选变为多选
          searchMultiple:false,
          type: 'select',
          props: {
            label: 'fullName',
            value: 'id'
          },
          dicUrl: '/api/blade-system/dept/deptList'
        },
        {
          label: "轮胎图片",
          prop: "filesList",
          hide: true,
          showColumn: false,
          overHidden: true,
          span: 24,
        },{
           label: "防爆",
           prop: "explosionProof",
                search: true,
           span: 8,
           type: 'select',
           dicData: [{
              label: '否',
              value: 0
           }, {
              label: '是',
              value: 1
           }],
        }, {
                label: "原厂",
                prop: "originalFactory",
                search: true,
                span: 8,
                type: 'select',
                dicData: [{
                    label: '否',
                    value: "0"
                }, {
                    label: '是',
                    value: "1"
                }],
            },
            {
                label: "自修补",
                prop: "selfRecovery",
                search: true,
                span: 8,
                type: 'select',
                dicData: [{
                    label: '否',
                    value: "0"
                }, {
                    label: '是',
                    value: "1"
                }],
            }, {
          label: "轮胎详情",
          prop: "detailsText",
          hide: true,
          span: 24,
          showColumn: false,
          overHidden: true,
        }]
      }
    }
  },
  activated() {
      listAllP({type:'PP'}).then(res => {
      this.treeData = res.data.data
    })
    this.onLoad(this.page, this.search)
  },
  async created() {
    this.option = await this.getColumnData(this.getColumnName(273), this.optionList);
    this.optionTwo = await this.getColumnData(
      this.getColumnName(280),
      this.optionTwo
    );
    this.key++
    let i = 0;
    this.option.column.forEach(item => {
      if (item.search) i++
    })
    this.$refs.crud.dicInit()
    if (i % 3 !== 0) {
      const num = 3 - Number(i % 3)
      this.option.searchMenuSpan = num * 8;
      this.option.searchMenuPosition = "right";
    }
  },
  methods: {
    derivation() {
      window.open(
        `/api/blade-sales-part/productLaunch/export-productLaunch?${this.website.tokenHeader
        }=${getToken()}`
      );
    },
    uploadAfter(res, done, loading, column) {
      this.excelBox = false;
      this.refreshChange();
      done();
    },
    nodeClick(data) {
      this.search.brandId = data.id
      this.page.currentPage = 1;
      this.onLoad(this.page, this.search);
  },
  //刷新
  refreshChange() {
    this.onLoad(this.page, this.search)
  },
  //刷新触发
  refreshChangeCost() {
    // this.treeDeptId = ''
    this.page.currentPage = 1;
    this.onLoad(this.page);
  },
  searchChange(params, done) {
    // sharedCompanyList
    // this.search.sharedCompanyList = params.sharedCompany;
    // Vue.delete(params, 'sharedCompany');
    // Vue.delete(this.search, 'sharedCompany');
    this.onLoad(this.page, params)
    done();
  },
  selectionChange(list) {
    this.selectionList = list
  },
  selectionChangeCost(list) {
    this.goodsListSave = list
    this.tableData = list
  },
  //新增
  commoditySelection() {
        delete this.page.brandId
      this.goodsListShow = []

    this.dialogVisibles = !this.dialogVisibles
    this.tableData = []
    this.goodsListSave = [];
  },
  //打开表单前
  beforeOpen(done, type) {
    // 查看和编辑逻辑
    if (['view', 'edit'].includes(type)) {
      getDetail({ id: this.form.id }).then(res => {
        this.form = res.data.data
        done();
      })
    }
  },
  // 标签页切换
  tabHandle(data) {
    if (data.name == 'searchList') {
      this.goodsListShow = this.data;
      this.page.total = this.pageList.total
    } else if (data.name == 'importStaging') {
      this.goodsListShow = this.goodsListSave;
      this.page.total = 0
    }
  },
  removeStagList(row, index, type) {
    if (type === 'policy') {
      this.goodsListPolicy.splice(row.$index, 1)
      if (this.goodsListPolicy.length == 0) {
        this.customerBuyFree.selection = true
        this.optionPolicy.selection = true
        this.$set(this.customerBuyFree, 'menu', true)
      }
    } else if (type === 'policy_buyAndGive') {
      this.buyAndGiveList.splice(row.$index, 1)
      if (this.buyAndGiveList.length == 0) {
        this.customerBuyFree.selection = true
        this.optionPolicy.selection = true
        this.$set(this.optionPolicy, 'menu', true)
      }
    } else {
      this.goodsListSave.splice(row.$index, 1)
    }
  },
  rowDel(row, index) {
    this.$confirm('此操作将永久删除该行, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      remove(row.id).then((res) => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.dataList.splice(index, 1);
        this.onLoad(this.page)
      })
    })
  },
  //编辑确定
  rowUpdate(form, index, done, loading) {
    if (this.form.filesList.length > 0) {
        // 循环把编辑状态变成保存状态
        this.form.filesList.map((item)=>{
            if (item.$cellEdit == true) {
                // this.$set(item, "$cellEdit", false);
                item.$cellEdit = false
            } else {
                // this.$set(item, "$cellEdit", true);
                item.$cellEdit = true
            }
        })

      let flag = this.form.filesList.some(item => {
        return item.$version == '主图'
      })
      if (!flag) {
        this.$message.warning('请选择主图')
        done()
        return
      }
    }
    submit({
      ...this.form
    }).then(res => {
      this.$message.success("修改成功")
      this.onLoad(this.page, this.search)
      done()
    }).catch((err) => {
      loading()
    })
    // submit({
    //   ...form
    // }).then(res => {
    //   this.onLoad(this.page, this.search)
    //   done()
    // }).catch(() => {
    //   loading()
    // })
  },
  resetChange() {
    if(document.getElementsByClassName("is-current")[0]){
      let selected = document.getElementsByClassName("is-current")[0]
      selected.classList.remove("is-current")
    }
  },
  check(row) {
    batchOperationProductLaunch({
      flag: row.upAndDownShelves,
      ids: row.id
    }).then(res => {
      this.onLoad(this.page, this.search)
    })
  },
  // 确认导入
  importGoods() {
    if (!this.goodsListSave.length) {
      this.$message.error('请选择')
    }
    if (this.goodsListSave.some(item => item.priceOne == undefined || item.priceTwo == undefined || item.priceThree == undefined || item.priceFour == undefined)) {
      this.$message.error('请填写所有售价');
    } else {
      if (this.goodsListSave.length > 0) {
        this.goodsListSaveHandle()
      }
    }

  },
  goodsListSaveHandle() {
    this.goodsListSave.forEach(item => {
      // item.sharedCompany ? item.sharedCompany.join(',') : ''
      item.sharedCompany = item.sharedCompany?item.sharedCompany.toString():'';
      this.goodsListSave.specificationAndModel = item.typeno
      delete this.goodsListSave.typeno
      // item.sharedCompany = JSON.stringify(item.sharedCompany)
    })

    productLaunch(this.goodsListSave).then(res => {
      this.dialogVisibles = !this.dialogVisibles

    })
  },
  //导入商品触发
  importChoice() {
    return
    // this.contactsData = this.contactsData.concat(this.tableData)
    if (this.tableData.length === 1) {
      this.goodsShowData[this.choiceIndexT].cname = this.tableData[0].cname
      this.goodsShowData[this.choiceIndexT].code = this.tableData[0].code
      this.goodsShowData[this.choiceIndexT].typeno = this.tableData[0].typeno
      this.goodsShowData[this.choiceIndexT].itemType = this.tableData[0].typeno
      this.goodsShowData[this.choiceIndexT].itemId = this.tableData[0].id
      this.goodsShowData[this.choiceIndexT].priceCategory = this.tableData[0].goodsTypeName
      this.goodsShowData[this.choiceIndexT].integralMultiples = this.tableData[0].integralMultiples
      this.goodsShowData[this.choiceIndexT].corpId = this.tableData[0].corpId
      this.goodsShowData[this.choiceIndexT].corpName = this.tableData[0].corpName
      this.quantityChange(this.goodsShowData[this.choiceIndexT])
      selectGoodsNum({
        goodsId: this.tableData[0].id,
        itemType: this.tableData[0].typeno,
        tradeType: 'GN',
        warehouseId: this.form.storageId
      }).then(res => {
        if (res.data.data.length > 0) {
          this.goodsShowData[this.choiceIndexT].storageQuantityList = res.data.data
          this.goodsShowData[this.choiceIndexT].storageId = res.data.data[0].storageId
          this.goodsShowData[this.choiceIndexT].storageName = res.data.data[0].storageName
          this.goodsShowData[this.choiceIndexT].storageQuantity = res.data.data[0].surplusRouteQuantity
          if (res.data.data[0].tenantId !== "681169") {
            this.goodsShowData[this.choiceIndexT].purchaseAmount = res.data.data[0].stockPrice
          }
        }
      })
    }
    this.dialogVisible = !this.dialogVisible
    this.commodityData = false
  },
  importStagList(row, index, type) {
    if (type === 'policy') {
      this.goodsListPolicy.push(row);
      if (this.goodsListPolicy.length > 0) {
        this.customerBuyFree.selection = false
        this.optionPolicy.selection = true
        this.$set(this.customerBuyFree, 'menu', false)
      }
    } else if (type === 'policy_buyAndGive') {
      this.buyAndGiveList.push(row);
      if (this.buyAndGiveList.length > 0) {
        this.customerBuyFree.selection = true
        this.optionPolicy.selection = false
        this.$set(this.optionPolicy, 'menu', false)
      }
    } else {
      this.goodsListSave.push(row);
    }
  },
  change(row, type) {
    let data = []
    for (let item of this.selectionList) {
      data.push(item.id)
    }
    if (type === "up") {
      // for (let item of this.selectionList) {
      //   if (!Number(item.salesPrice)) return this.$message.error("上架失败,商城价格不能为0")
      // }
      this.$confirm('是否确认全部上架?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        batchOperationProductLaunch({
          flag: 1,
          ids: data.join(",")
        }).then(res => {
          this.onLoad(this.page, this.search)
        })
      })
    } else if (type === "down") {
      this.$confirm('是否确认全部下架?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        batchOperationProductLaunch({
          flag: 0,
          ids: data.join(",")
        }).then(res => {
          this.onLoad(this.page, this.search)
        })
      })
    }
  },
  //新增搜索
  goodsSearchCost(params, done) {
    this.treeDeptId = ''
    params = {
      ...params,
      // artsVision: this.form.belongToCorpId
    }
    this.onLoad(this.page, params);
    done()
  },
  onLoad(page, params = {}) {
    // 深拷贝一份防止弹出框的搜索参数和外面表格的搜索参数一样
    let search = JSON.parse(JSON.stringify(this.search))
      search.cname = params.cname

    // this.search.cname = params.cname

    // params.sharedCompany = params.$sharedCompany
    params = {
      ...params,
      current: page.currentPage,
      size: page.pageSize,
      ...Object.assign(params, search),
        // ...Object.assign(params, this.search),
      billType: 0
    }
    this.loading = true
    getList(params).then(res => {
      this.dataList = res.data.data.records
      this.page.total = res.data.data.total
      this.pageList.total = res.data.data.total
      this.$nextTick(() => {
        this.$refs.crud.doLayout();
      });
      this.loading = false
    }).finally(() => {
      this.loading = false
    })
    this.loading = true

    groundingList(params).then(res => {
      this.goodsListShow = res.data.data.records
      this.data = res.data.data.records;
      this.pages.total = res.data.data.total
      this.loading = false
    }).finally(() => {
      this.loading = false
    })
    deptList().then(res => {
      this.sharedCompanyoptions = res.data.data
    })
  },
  async saveGoodsColumn() {
      const inSave = await this.saveColumnData(
        this.getColumnName(280),
        this.optionTwo
      );
      if (inSave) {
        this.$message.success("保存成功");
        //关闭窗口
        this.$refs.cruds.$refs.dialogColumn.columnBox = false;
        this.$nextTick(() => {
          this.$refs.cruds.doLayout()
        })
      }
    },
    async resetGoodsColumn() {
      this.optionTwo = commodity;
      const inSave = await this.delColumnData(
        this.getColumnName(280),
        commodity
      );
      if (inSave) {
        this.$nextTick(() => {
          this.$refs.cruds.doLayout()
        })
        this.$message.success("重置成功");
        //关闭窗口
        setTimeout(() => {
          this.$refs.cruds.$refs.dialogColumn.columnBox = false;
        }, 1000);
      }
    },
  //自定义列保存
  async saveColumnTwo(ref, option, optionBack, code) {
    /**
     * 已定义全局方法，直接使用，saveColumnData保存列数据方法,参数传值(表格名称，当前表格的option数据)
     * 已定义全局方法，直接使用，getColumnName方法用来获取枚举值，参数根据自己定义的code值获取中文名
     * 一定要执行异步操作，要等接口成功返回，才能执行下一行代码
     */
    const inSave = await this.saveColumnData(this.getColumnName(code), this[option]);
    if (inSave) {
      this.$message.success("保存成功");
      //关闭窗口
      this.$nextTick(() => {
        this.$refs.crud.doLayout();
      });
      this.$refs[ref].$refs.dialogColumn.columnBox = false;
    }
  },
  //自定义列重置
  async resetColumnTwo(ref, option, optionBack, code) {
    this[option] = this[optionBack];
    const inSave = await this.delColumnData(this.getColumnName(code), this[optionBack]);
    if (inSave) {
      this.$message.success("重置成功");
      this.$refs[ref].$refs.dialogColumn.columnBox = false;
      this.$nextTick(() => {
        this.$refs.crud.doLayout();
      });
    }
  }
}
}
</script>

<style scoped></style>