anpinjingyuan-ui/src/views/basicdata/AddOrUpdate.vue

<template>
  <div class="app-container">
    <div v-show="mainTable == false">
      <el-form label-width="100px" ref="form" :model="form">
        <el-row>
          <el-col v-for="item in searchdata" :span="item.span" :key="item.key">
            <el-form-item :label="item.name" v-if="item.key <= bug">
              <el-select v-if="item.form == 1" v-model="form[item.label]" :style="{ width: item.width + 'px' }"></el-select>
              <el-input v-if="item.form == 2" v-model="form[item.label]" :style="{ width: item.width + 'px' }"></el-input>
              <el-input v-if="item.form == 4" type="textarea" v-model="form[item.label]" :style="{ width: item.width + 'px' }"></el-input>
              <el-date-picker v-if="item.form == 3" v-model="form[item.label]" :style="{ width: item.width + 'px' }" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            v-hasPermi="['finance:contrast:add']"
          >新增</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="success"
            icon="el-icon-edit"
            size="mini"
            :disabled="single"
            @click="handleUpdate"
            v-hasPermi="['warehouse:contrast:edit']"
          >修改</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['finance:contrast:export']"
          >导出</el-button
          >
        </el-col>
        <div class="tabSetting">
          <div style="margin-right: 20px">
            <el-button
              type="cyan"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
            >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
            >
            <el-button
              @click="show"
              :icon="arrow"
              size="mini"
            >展开</el-button
            >
          </div>
          <right-toolbar
            :showSearch.sync="showSearch"
            @queryTable="getList"
          ></right-toolbar>
          <div style="margin: 0 12px">
            <el-button
              icon="el-icon-setting"
              size="mini"
              circle
              @click="showSetting = !showSetting"
            ></el-button>
          </div>
        </div>
      </el-row>
      <el-dialog
        title="自定义列显示"
        :visible.sync="showSetting"
        width="700px"
        v-dialogDrag
      >
        <template slot="title">
          <div class="avue-crud__dialog__header">
          <span class="el-dialog__title">
            <span
              style="
                display: inline-block;
                width: 3px;
                height: 20px;
                margin-right: 5px;
                float: left;
                margin-top: 2px;
              "
            ></span>
          </span>
          </div>
        </template>
        <div>配置排序列数据（拖动调整顺序）</div>
        <div style="margin-left: 17px">
          <el-checkbox
            v-model="allCheck"
            label="全选"
            @change="allChecked"
          ></el-checkbox>
        </div>
        <div style="padding: 4px; display: flex; justify-content: center">
          <draggable
            v-model="setRowList"
            group="site"
            animation="300"
            @start="onStart"
            @end="onEnd"
            handle=".indraggable"
          >
            <transition-group>
              <div
                v-for="item in setRowList"
                :key="item.surface"
                class="listStyle"
              >
                <div style="width: 500px" class="indraggable">
                  <div class="progress" :style="{ width: item.width + 'px' }">
                    <el-checkbox
                      :label="item.name"
                      v-model="item.checked"
                      :true-label="0"
                      :false-label="1"
                    >{{ item.name }}
                    </el-checkbox>
                  </div>
                </div>
                <el-input-number
                  v-model.number="item.width"
                  controls-position="right"
                  :min="1"
                  :max="500"
                  size="mini"
                ></el-input-number>
              </div>
            </transition-group>
          </draggable>
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button @click="showSetting = false">取 消</el-button>
        <el-button @click="delRow" type="danger">重 置</el-button>
        <el-button type="primary" @click="save()">确 定</el-button>
      </span>
      </el-dialog>
      <el-table
        v-loading="loading"
        :data="corpsList"
        ref="corpsList"
        @selection-change="handleSelectionChange"
        show-summary
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="行号" align="center" type="index" />
        <el-table-column
          v-for="(item, index) in getRowList"
          :key="index"
          :label="item.name"
          :width="item.width"
          :prop="item.label"
          align="center"
          :fixed="item.fixed"
          :show-overflow-tooltip="true"
          sortable
        />
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          min-width="180"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="check(scope.row, 0)"
            >查看</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
            >
              修改</el-button
            >

            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
            >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-if="mainTable == true">
      <el-form label-width="100px" ref="detailForm" :model="detailForm" >
        <el-row>
          <el-col v-for="(item,index) in detailOption" :key="index" :span="item.span">
            <el-form-item :label="item.name" >
              <el-select v-if="item.form == 1" v-model="detailForm[item.label]" :style="{ width: item.width + 'px' }"></el-select>
              <el-input v-if="item.form == 2" v-model="detailForm[item.label]" :style="{ width: item.width + 'px' }"></el-input>
              <el-input v-if="item.form == 4" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="detailForm[item.label]" ></el-input>
              <el-date-picker v-if="item.form == 3" v-model="detailForm[item.label]" :style="{ width: item.width + 'px' }" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
              <el-radio-group v-if="item.form == 5" v-model="detailForm[item.label]">
                <el-radio v-for="dict in statusOptions" :key="dict.dictValue" v-model="status" :label="dict.dictValue">{{ dict.dictLabel }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="addRow(contactList)"
            >添加</el-button
            >
          </el-col>
          <div style="margin: 0 12px;float: right">
            <el-button
              icon="el-icon-setting"
              size="mini"
              circle
              @click="showSetting2 = !showSetting2"
            ></el-button>
          </div>
        </el-row>
      </div>
      <el-dialog
        title="自定义列显示"
        :visible.sync="showSetting2"
        width="700px"
        v-dialogDrag
        append-to-body
      >
        <template slot="title">
          <div class="avue-crud__dialog__header">
            <span class="el-dialog__title">
              <span
                style="
                  display: inline-block;
                  width: 3px;
                  height: 20px;
                  margin-right: 5px;
                  float: left;
                  margin-top: 2px;
                "
              ></span>
            </span>
          </div>
        </template>
        <div>配置排序列数据（拖动调整顺序）</div>
        <div style="margin-left: 17px">
          <el-checkbox
            v-model="allCheck2"
            label="全选"
            @change="allChecked2"
          ></el-checkbox>
        </div>
        <div style="padding: 4px; display: flex; justify-content: center">
          <draggable
            v-model="setRowList2"
            group="site"
            animation="300"
            @start="onStart"
            @end="onEnd"
            handle=".indraggable"
          >
            <transition-group>
              <div
                v-for="item in setRowList2"
                :key="item.surface"
                class="listStyle"
              >
                <div style="width: 500px" class="indraggable">
                  <div class="progress" :style="{ width: item.width + 'px' }">
                    <el-checkbox
                      :label="item.name"
                      v-model="item.checked"
                      :true-label="0"
                      :false-label="1"
                    >{{ item.name }}
                    </el-checkbox>
                  </div>
                </div>
                <el-input-number
                  v-model.number="item.width"
                  controls-position="right"
                  :min="1"
                  :max="500"
                  size="mini"
                ></el-input-number>
              </div>
            </transition-group>
          </draggable>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="showSetting2 = false">取 消</el-button>
          <el-button @click="delRow2" type="danger">重 置</el-button>
          <el-button type="primary" @click="save2()">确 定</el-button>
        </span>
      </el-dialog>
      <el-table v-loading="loading" :data="contactList">
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column type="index" width="55" align="center"/>
        <el-table-column
          v-for="(item, index) in getRowList2"
          :key="index"
          :label="item.name"
          :width="item.width"
          :prop="item.label"
          align="center"
        >
          <template slot-scope="scope">
            <el-input v-if="item.type == 2" v-model="scope.row[item.label]"></el-input>
            <el-select v-if="item.type == 1" v-model="scope.row[item.label]"></el-select>
            <el-date-picker v-if="item.type == 3" v-model="scope.row[item.label]" style="width: 100%" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>

          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click.native.prevent="deleteRow(scope.$index, contactList)"
            >删除</el-button
            >
          </template>
        </el-table-column>

        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-table>
    </div>
  </div>
</template>

<script>
import { addSet, select, resetModule  } from "@/api/system/set";
import draggable from "vuedraggable";
import Vue from "vue";
import Cookies from "js-cookie";
Vue.directive("dialogDrag", {
  bind(el, binding, vnode, oldVnode) {
    const dialogHeaderEl = el.querySelector(".el-dialog__header");
    const dragDom = el.querySelector(".el-dialog");
    const enlarge = el.querySelector(".enlarge");
    dialogHeaderEl.style.cursor = "move";

    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
    if (enlarge) {
      enlarge.onclick = (e) => {
        dragDom.style.top = "0px";
        dragDom.style.left = "0px";
      };
    }
    dialogHeaderEl.onmousedown = (e) => {
      // 鼠标按下，计算当前元素距离可视区的距离
      const disX = e.clientX - dialogHeaderEl.offsetLeft;
      const disY = e.clientY - dialogHeaderEl.offsetTop;

      // 获取到的值带px 正则匹配替换
      let styL, styT;

      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
      if (sty.left.includes("%")) {
        styL =
          +document.body.clientWidth * (+sty.left.replace(/\%/g, "") / 100);
        styT =
          +document.body.clientHeight * (+sty.top.replace(/\%/g, "") / 100);
      } else {
        styL = +sty.left.replace(/\px/g, "");
        styT = +sty.top.replace(/\px/g, "");
      }

      document.onmousemove = function (e) {
        // 通过事件委托，计算移动的距离
        const l = e.clientX - disX;
        const t = e.clientY - disY;

        // 移动当前元素

        if (t + styT >= 0) {
          dragDom.style.top = `${t + styT}px`;
        }
        dragDom.style.left = `${l + styL}px`;
        // 将此时的位置传出去
        // binding.value({x:e.pageX,y:e.pageY})
      };

      document.onmouseup = function (e) {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    };
  },
});
export default {
name: "corps",
  components:{
    draggable
  },
  props:searchdata,
  data() {
    return {
      setRowList2: [],
      getRowList2: [],
      status:'0',
      allCheck2: false,
      showSetting2: false,
      tableDate2: [
        {
          surface: "1",
          label: "fMblno",
          name: "编号",
          checked: 0,
          width: 100,
          type:2,
        },
        {
          surface: "2",
          label: "fBscorpno",
          name: "客户名称",
          checked: 0,
          width: 100,
          type:1
        },
        {
          surface: "3",
          label: "fProductName",
          name: "英文全称",
          checked: 0,
          width: 100,
          type:1
        },
        {
          surface: "4",
          label: "fBsdate",
          name: "电话",
          checked: 0,
          width: 100,
          type:1,
        },
        {
          surface: "5",
          label: "fFeeName",
          name: "备注",
          checked: 0,
          width: 100,
          type:1,
        },
        {
          surface: "6",
          label: "fSrcdc",
          name: "登陆人",
          checked: 0,
          width: 100,
          type:2
        },
        {
          surface: "7",
          label: "fBilltype",
          name: "状态",
          checked: 0,
          width: 100,
          type:2,
        },
        {
          surface: "8",
          label: "fBusinessType",
          name: "录入人",
          checked: 0,
          width: 100,
          type:1
        },
        {
          surface: "9",
          label: "fAmtdr",
          name: "录入时间",
          checked: 0,
          width: 100,
          type:3
        },
        {
          surface: "10",
          label: "fAmt",
          name: "最新修改人",
          checked: 0,
          width: 100,
          type:2
        },
        {
          surface: "11",
          label: "fRemarks",
          name: "最新修改时间",
          checked: 0,
          width: 100,
          type:3
        },
      ],
      contactList:[],
      //状态
      statusOptions:[
        {
        dictLabel:'正常',
        dictValue:'0'
      },
        {
          dictLabel:'停用',
          dictValue:'1'
        }
      ],
      // 遮罩层
      loading: false,
      //自定义列
      setRowList: [],
      getRowList: [],
      allCheck: false,
      showSetting: false,
      //展开图标
      arrow:'el-icon-arrow-up',
      // 显示搜索条件
      showSearch: true,
      // 非单个禁用
      single: true,
      mainTable:false,
      form:{},
      detailForm:{},
      corpsList:[],
      //控制展开第一行
      bug:4,
      formOption:[
        {
          key:"1",
          span:6,
          label: 'fCtrlcorpid',
          name:"客户类别",
          form:1,
          width:200,
        },
        {
          key:"2",
          span:6,
          label:"fBillno",
          name:"编号",
          form:2,
          width:200,
        },
        {
          key:"3",
          span:6,
          label: "fCorpidName",
          name:"客户名称",
          form:1,
          width:200,
        },
        {
          key:"4",
          span:6,
          label: "createBy",
          name:"录入人",
          form:2,
          width:200,
        },
        {
          key:"5",
          span:6,
          label:"cLoadDate",
          name:"录入区间",
          form:3,
          width:200,
        },
        {
          key:"6",
          span:6,
          label:"fRemark",
          name:"备注",
          form:2,
          width:200,
        },
      ],
      tableDate: [
        {
          surface: "1",
          label: "fBillno",
          name: "客户类别",
          checked: 0,
          width: 100,
        },
        {
          surface: "2",
          label: "fCtrlcorpid",
          name: "客户编号",
          checked: 0,
          width: 100,
        },
        {
          surface: "3",
          label: "fCorpidName",
          name: "客户名称",
          checked: 0,
          width: 100,
        },
        {
          surface: "4",
          label: "fAccbilldate",
          name: "英文全称",
          checked: 0,
          width: 100,
        },
        {
          surface: "5",
          label: "tMblno",
          name: "电话",
          checked: 0,
          width: 100,
        },
        {
          surface: "6",
          label: "fAmtdr",
          name: "税号",
          checked: 0,
          width: 100,
        },
        {
          surface: "7",
          label: "fAmtcr",
          name: "开票地址",
          checked: 0,
          width: 100,
        },
        {
          surface: "8",
          label: "fRemarks",
          name: "开票电话",
          checked: 0,
          width: 100,
        },
        {
          surface: "9",
          label: "fBillstatus",
          name: "本位银行",
          checked: 0,
          width: 100,
        },
        {
          surface: "10",
          label: "fBillstatus",
          name: "银行账号",
          checked: 0,
          width: 100,
        },
        {
          surface: "11",
          label: "fBillstatus",
          name: "状态",
          checked: 0,
          width: 100,
        },
        {
          surface: "12",
          label: "fBillstatus",
          name: "备注",
          checked: 0,
          width: 100,
        },
        {
          surface: "13",
          label: "fBillstatus",
          name: "录入人",
          checked: 0,
          width: 100,
        },
        {
          surface: "14",
          label: "fBillstatus",
          name: "录入时间",
          checked: 0,
          width: 100,
        },
        {
          surface: "15",
          label: "fBillstatus",
          name: "最新修改人",
          checked: 0,
          width: 100,
        },
        {
          surface: "16",
          label: "fBillstatus",
          name: "最新修改时间",
          checked: 0,
          width: 100,
        },
      ],
      detailOption:[
        {
          span:6,
          label: 'fCtrlcorpid',
          name:"客户类别",
          form:1,
          width:200,
        },
        {
          span:6,
          label: 'fCtrlcorpid',
          name:"编号",
          form:2,
          width:200,
        },
        {
          span:6,
          label: 'fCtrlcorpid',
          name:"名称",
          form:2,
          width:200,
        },
        {
          span:6,
          label: 'fCtrlcorpid',
          name:"英文名",
          form:2,
          width:200,
        },
        {
          span:6,
          label: 'fCtrlcorpid',
          name:"电话",
          form:2,
          width:200,
        },
        {
          span:6,
          label: 'fCtrlcorpid',
          name:"邮箱",
          form:2,
          width:200,
        },
        {
          span:6,
          label: 'fCtrlcorpid',
          name:"微信",
          form:2,
          width:200,
        },
        {
          span:6,
          label: 'fCtrlcorpid',
          name:"传真",
          form:2,
          width:200,
        },
        {
          span:6,
          label: 'fCtrlcorpid',
          name:"联系人",
          form:2,
          width:200,
        },
        {
          span:6,
          label: 'fCtrlcorpid',
          name:"地址",
          form:2,
          width:200,
        },
        {
          span:6,
          label: 'fCtrlcorpid',
          name:"英文地址",
          form:2,
          width:200,
        },
        {
          span:6,
          label: 'fCtrlcorpid',
          name:"规模",
          form:2,
          width:200,
        },
        {
          span:6,
          label: 'fCtrlcorpid',
          name:"省",
          form:2,
          width:200,
        },
        {
          span:6,
          label: 'fCtrlcorpid',
          name:"市",
          form:2,
          width:200,
        },
        {
          span:6,
          label: 'fCtrlcorpid',
          name:"结算方式",
          form:1,
          width:200,
        },
        {
          span:6,
          label: 'fCtrlcorpid',
          name:"结算天数",
          form:2,
          width:200,
        },
        {
          span:6,
          label: 'fCtrlcorpid',
          name:"合同号",
          form:2,
          width:200,
        },
        {
          span:6,
          label: 'fCtrlcorpid',
          name:"有效期",
          form:3,
          width:200,
        },
        {
          span:6,
          label: 'fCtrlcorpid',
          name:"税号",
          form:2,
          width:200,
        },
        {
          span:6,
          label: 'fCtrlcorpid',
          name:"开票地址",
          form:2,
          width:200,
        },
        {
          span:6,
          label: 'fCtrlcorpid',
          name:"开票电话",
          form:2,
          width:200,
        },
        {
          span:6,
          label: 'fCtrlcorpid',
          name:"本位币银行",
          form:2,
          width:200,
        },
        {
          span:6,
          label: 'fCtrlcorpid',
          name:"银行账号",
          form:2,
          width:200,
        },
        {
          span:6,
          label: 'fCtrlcorpid',
          name:"外币银行",
          form:2,
          width:200,
        },
        {
          span:6,
          label: 'fStatus',
          name:"状态",
          form:5,
          default:0,
          width:200,
        },
        {
          span:12,
          label: 'fCtrlcorpid',
          name:"备注",
          form:4,
          width:200,
        },
      ],
    }
  },
  created() {
    this.setRowList = this.tableDate;
    this.getRowList = this.tableDate;
    this.setRowList2 = this.tableDate2;
    this.getRowList2 = this.tableDate2;
    this.getRow()
    this.getRow2()
  },
  methods: {
    // 添加行
    addRow(tableData, event) {
      var obj = {};
      tableData.push(obj);
    },
    //删除行
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    // 状态修改
    handleStatusChange(row) {
      let text = row.fStatus === "0" ? "启用" : "停用";
      this.$confirm('确认要"' + text + '""' + row.fName + '"吗?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {

        })
        .then(() => {

        })
        .catch(function () {

        });
    },
    show(){
      if (this.bug == this.formOption.length){
        this.bug = 4
        this.arrow = 'el-icon-arrow-up'
      }else {
        this.bug = this.formOption.length
        this.arrow = 'el-icon-arrow-down'
      }
    },
    //确定
    submitForm(){

    },
    //取消
    cancel(){

    },
    //页面刷新
    getList() {

    },
    //删除
    handleDelete(){

    },
    //查看
    check(){

    },
    //新增
    handleAdd() {
      this.mainTable = true
    },
    //修改
    handleUpdate() {

    },
    //导出
    handleExport() {

    },
    //搜索
    handleQuery() {

    },
    //重置
    resetQuery() {

    },
    //选择行
    handleSelectionChange(){

    },
    //列表页合计
    listTotal(){

    },
    //列设置全选
    allChecked() {
      if (this.allCheck == true) {
        this.setRowList.map((e) => {
          return (e.checked = 0);
        });
      } else {
        this.setRowList.map((e) => {
          return (e.checked = 1);
        });
      }
    },
    //查询列数据
    getRow() {
      let that = this;
      this.data = {
        tableName: "客户信息",
        userId: Cookies.get("userName"),
      };
      select(this.data).then((res) => {
        if (res.data.length != 0) {
          this.getRowList = res.data.filter((e) => e.checked == 0);
          this.setRowList = res.data;
          this.setRowList = this.setRowList.reduce((res, item) => {
            res.push({
              surface: item.surface,
              label: item.label,
              name: item.name,
              checked: item.checked,
              width: item.width,
              fixed: item.fixed,
            });
            return res;
          }, []);
        }
      });
    },
    //保存列设置
    save() {
      this.showSetting = false;
      this.data = {
        tableName: "客户信息",
        userId: Cookies.get("userName"),
        sysTableSetList: this.setRowList,
      };
      addSet(this.data).then((res) => {
        this.getRowList = this.setRowList.filter((e) => e.checked == 0);
      });
    },
    //重置列表
    delRow() {
      this.data = {
        tableName: "客户信息",
        userId: Cookies.get("userName"),
      };
      resetModule(this.data).then((res) => {
        if (res.code == 200) {
          this.showSetting = false;
          this.setRowList = this.getRowList = this.$options.data().tableDate
        }
      });
    },
    //列设置全选
    allChecked2() {
      if (this.allCheck2 == true) {
        this.setRowList2.map((e) => {
          return (e.checked = 0);
        });
      } else {
        this.setRowList2.map((e) => {
          return (e.checked = 1);
        });
      }
    },
    //查询列数据
    getRow2() {
      let that = this;
      this.data = {
        tableName: "详情客户列表",
        userId: Cookies.get("userName"),
      };
      select(this.data).then((res) => {
        if (res.data.length != 0) {
          this.getRowList2 = res.data.filter((e) => e.checked == 0);
          this.setRowList2 = res.data;
          this.setRowList2 = this.setRowList2.reduce((res, item) => {
            res.push({
              surface: item.surface,
              label: item.label,
              name: item.name,
              checked: item.checked,
              width: item.width,
              fixed: item.fixed,
            });
            return res;
          }, []);
        }
      });
    },
    //保存列设置
    save2() {
      this.showSetting2 = false;
      this.data = {
        tableName: "详情客户列表",
        userId: Cookies.get("userName"),
        sysTableSetList: this.setRowList2,
      };
      addSet(this.data).then((res) => {
        this.getRowList2 = this.setRowList2.filter((e) => e.checked == 0);
      });
    },
    //重置列表
    delRow2() {
      this.data = {
        tableName: "详情客户列表",
        userId: Cookies.get("userName"),
      };
      resetModule(this.data).then((res) => {
        if (res.code == 200) {
          this.showSetting2 = false;
          this.setRowList2 = this.getRowList2 = this.$options.data().tableDate2
        }
      });
    },

    //开始拖拽事件
    onStart() {
      this.drag = true;
    },
    //拖拽结束事件
    onEnd() {
      this.drag = false;
    },
  }
}
</script>
<style lang="scss" scoped>
.tabSetting {
display: flex;
justify-content: flex-end;
}
.listStyle {
display: flex;
border-top: 1px solid #dcdfe6;
border-left: 1px solid #dcdfe6;
border-right: 1px solid #dcdfe6;
}
.listStyle:last-child {
border-bottom: 1px solid #dcdfe6;
}
.progress {
display: flex;
align-items: center;
padding: 2px;
background-color: rgba(0, 0, 0, 0.05);
height: 100%;
}
.avue-crud__dialog__header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.el-dialog__title {
color: rgba(0, 0, 0, 0.85);
font-weight: 500;
word-wrap: break-word;
}
.avue-crud__dialog__menu {
padding-right: 20px;
float: left;
}
.avue-crud__dialog__menu i {
color: #909399;
font-size: 15px;
}
.el-icon-full-screen {
cursor: pointer;
}
.el-icon-full-screen:before {
content: "\e719";
}
</style>