jf-frock/src/views/OrderMannage/BusinessOrderlist/list.vue

<template>
  <div>
    <FullPage
      title="家装订单列表"
      :list="set_list"
      @init="init"
      :loading="loading"
      @searchData="init"
      @changePage="changePage"
      @changeSize="changeSize"
      @selectTable="selectTable"
      :tableColums="computedTable"
      :tableData="tableData"
      :max-height="500"
      :page_index="page_index"
      :showPage="false"
      :total="total"
    >
      <div slot="titleButton" style="display: flex">
        <Upload
          name="your_file"
          :show-upload-list="false"
          :headers="headers"
          :on-error="uploadError"
          :on-success="uploadSuccess"
          :action="$store.state.ip + '/api/orders_import'"
        >
          <Button
            v-if="persimissionData['批量导入'] || persimissionData.all"
            type="success"
            ghost
            icon="md-exit"
            style="margin-right: 10px"
            >批量导入</Button
          >
        </Upload>
        <Button
          v-if="persimissionData['批量导出'] || persimissionData.all"
          @click="exportData"
          type="warning"
          ghost
          style="margin-right: 10px"
          icon="md-return-left"
          >批量导出</Button
        >
        <Button
          v-if="persimissionData['批量下测量'] || persimissionData.all"
          type="primary"
          style="margin-right: 10px"
          @click="openLower(selectIds, '测量', 'orders_set_measure')"
          ghost
          >批量下测量</Button
        >
        <Button
          v-if="persimissionData['批量下生产'] || persimissionData.all"
          type="primary"
          @click="openLower(selectIds, '生产', 'order_oa_people')"
          ghost
          >批量下生产</Button
        >
      </div>
      <div slot="navButton" style="display: flex">
        <!-- v-if="persimissionData['排序设置'] || persimissionData.all" -->
        <Button
          @click="handleSortSet"
          type="primary"
          style="margin-right: 10px"
          ghost
          icon="ios-cog"
          >排序设置</Button
        >
        <Button
          v-if="persimissionData['表头设置'] || persimissionData.all"
          @click="setupTableHeader"
          type="primary"
          style="margin-right: 10px"
          ghost
          icon="ios-cog"
          >设置</Button
        >
        <Button
          v-if="persimissionData['新增订单'] || persimissionData.all"
          @click="addOrder(1)"
          type="primary"
          ghost
          icon="ios-add"
          >新增订单</Button
        >
      </div>
      <template slot="basicTypeSet" slot-scope="{ row }">
        <div>
          <span
            v-for="item in warningList"
            :key="item.id"
            :style="{ color: item.color }"
            v-show="item.id == row.warning_state"
            >{{ item.title }}</span
          >
        </div>
      </template>
      <template slot="set" slot-scope="{ row }">
        <div>
          <a
            v-if="persimissionData['收款'] || persimissionData.all"
            @click="handleOpenCharge(row, '收款', 'orders_set_measure')"
            style="margin: 0 5px"
            >收款</a
          >
          <a
            v-if="persimissionData['下生产'] || persimissionData.all"
            @click="openLower(row, '生产', 'order_oa_people')"
            style="margin: 0 5px"
            >下生产</a
          >
          <a
            v-if="
              (persimissionData['编辑'] || persimissionData.all) &&
                row.state == 0
            "
            style="margin: 0 5px"
            @click="addOrder(2, row)"
            >编辑</a
          >
          <a
            v-if="persimissionData['详情'] || persimissionData.all"
            style="margin: 0 5px"
            @click="addOrder(3, row)"
            >详情</a
          >
          <a
            v-if="
              (persimissionData['删除'] || persimissionData.all) &&
                row.state == 0
            "
            style="margin: 0 5px"
            @click="delItems(row)"
            >删除</a
          >
        </div>
      </template>
      <template slot="pageSlot">
        <div class="pageSlotStyle">
          <Page
            :page-size-opts="[10, 20, 30, 40, 100, 1000]"
            @on-page-size-change="changeSize"
            @on-change="changePage"
            :current="page_index"
            show-total
            :total="total"
            show-sizer
            :page-size="page_size"
          />
        </div>
      </template>
    </FullPage>
    <Modal
      v-model="chargeModal"
      title="收款"
      @on-ok="handleChargeModalOk"
      @on-cancel="chargeModal = false"
    >
      <div>
        <Form :model="chargeModalForm" :label-width="80">
          <FormItem label="收款项目:">
            <Input
              type="text"
              v-model="chargeModalForm.title"
              placeholder="请输入收款项目"
            />
          </FormItem>
          <FormItem label="收款金额:">
            <Input
              type="text"
              v-model="chargeModalForm.price"
              placeholder="请输入收款金额"
            />
          </FormItem>
          <FormItem label="备注:">
            <Input
              type="text"
              v-model="chargeModalForm.remark"
              placeholder="请输入备注"
            />
          </FormItem>
        </Form>
        <Table
          :columns="modalChargeTablecolumns"
          border
          :data="modalChargeTableData"
        ></Table>
      </div>
    </Modal>
    <Modal
      v-model="showModal"
      title="设置"
      @on-ok="handleModalOk"
      @on-cancel="showModal = false"
    >
      <div class="modal_content">
        <Tabs
          value="name1"
          style="max-height: 700px; overflow: hidden; overflow-y: auto"
        >
          <TabPane label="表单设置" name="name1">
            <Table
              :columns="formModalColumns"
              border
              draggable
              @on-drag-drop="(a, b) => onDragDrop(a, b, formModalTableData, 1)"
              :data="formModalTableData"
            ></Table>
          </TabPane>
          <TabPane label="表头设置" name="name2">
            <Table
              :columns="tableModalColumns"
              border
              draggable
              @on-drag-drop="(a, b) => onDragDrop(a, b, tableModalTableData, 2)"
              :data="tableModalTableData"
            ></Table>
          </TabPane>
        </Tabs>
      </div>
    </Modal>
    <!-- 排序设置弹窗 -->

    <Modal v-model="showSortModal" title="排序设置" width="650">
      <div>
        <Form
          :label-width="80"
          inline
          v-for="(_item, _index) in sortList"
          :key="_index"
        >
          <FormItem :label="'关键字' + (_index + 1)">
            <Select filterable clearable transfer v-model="_item.value">
              <Option
                v-for="item of headerList"
                :key="item.key"
                :label="item.title"
                :value="item.key"
              ></Option>
            </Select>
          </FormItem>
          <FormItem label="排序方式">
            <Select
              style="width:150px"
              filterable
              clearable
              transfer
              v-model="_item.sort"
            >
              <Option label="升序" :value="1"></Option>
              <Option label="降序" :value="2"></Option>
            </Select>
          </FormItem>
          <FormItem :label-width="10">
            <Icon
              @click="
                handleSortListChange(sortList, 0, _index, {
                  sort: null,
                  level: sortList.length + 1,
                  value: '',
                })
              "
              style="'margin:0 10px"
              size="20"
              type="ios-add"
            />
            <Icon
              @click="handleSortListChange(sortList, 1, _index, null)"
              v-show="sortList.length > 1"
              style="'margin:0 10px"
              size="20"
              type="ios-remove"
            />
          </FormItem>
        </Form>
      </div>
      <div slot="footer">
        <Button
          @click="showSortModal = false"
          type="primary"
          style="margin-right: 10px"
          >取消</Button
        >
        <Button
          @click="handleConfirmSort"
          type="primary"
          style="margin-right: 10px"
          >确定</Button
        >
      </div>
    </Modal>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      tableColums: [
        {
          type: "selection",
          align: "center",
          key: "selection",
          minWidth: 100,
          fixed: "left",
          title: "全选",
        },
        { title: "订单编号", align: "center", key: "order_no", minWidth: 200 },
        {
          title: "项目名称",
          align: "center",
          key: "residential_name",
          minWidth: 200,
        },
        { title: "业务员", align: "center", key: "nickname", minWidth: 150 },
        {
          title: "客户姓名",
          align: "center",
          key: "client_name",
          minWidth: 150,
        },
        { title: "客户地址", align: "center", key: "address", minWidth: 200 },
        { title: "审核人", align: "center", key: "crt_name", minWidth: 150 },
        {
          title: "紧急程度",
          align: "center",
          key: "warning_state",
          minWidth: 100,
          slot: "basicTypeSet",
        },
        {
          title: "产品总价",
          align: "center",
          key: "predict_price",
          minWidth: 120,
        },
        { title: "折扣金额", align: "center", key: "fax_price", minWidth: 120 },
        {
          title: "订单金额",
          align: "center",
          key: "price",
          minWidth: 120,
          render(h, params) {
            return h(
              "span",
              {},
              (params.row.predict_price - params.row.fax_price).toFixed(2)
            );
          },
        },
        { title: "已收款", align: "center", key: "get_money", minWidth: 120 },
        {
          title: "未收款",
          align: "center",
          key: "unget_money",
          minWidth: 120,
          render(h, params) {
            return h(
              "span",
              {},
              params.row.predict_price - params.row.get_money
            );
          },
        },
        {
          title: "备注",
          align: "center",
          key: "remark",
          minWidth: 100,
          tooltip: true,
        },
        {
          title: "订单开始日期",
          align: "center",
          minWidth: 180,
          key: "start_time",
          render: (h, params) =>
            h("span", {}, this.func.replaceDate(params.row.start_time, 1)),
        },
        {
          title: "订单交付日期",
          align: "center",
          minWidth: 180,
          key: "end_time",
          render: (h, params) =>
            h("span", {}, this.func.replaceDate(params.row.end_time, 1)),
        },
        {
          title: "生产进度",
          align: "center",
          key: "complete_rate",
          minWidth: 180,
          render(h, params) {
            return h(
              "span",
              {},
              parseInt(params.row.complete_rate * 100) + "%"
            );
          },
        },
        {
          title: "订单状态",
          align: "center",
          key: "state",
          minWidth: 150,
          render: (h, params) =>
            h(
              "span",
              {},
              params.row.state == 0
                ? "全部"
                : params.row.state == 1
                ? "测量未审核"
                : params.row.state == 2
                ? "测量审核中"
                : params.row.state == 3
                ? "测量通过"
                : params.row.state == 4
                ? "生产未审核"
                : params.row.state == 5
                ? "生产审核中"
                : params.row.state == 6
                ? "生产通过"
                : params.row.state == 7
                ? "到生产计划"
                : params.row.state == 8
                ? "派工"
                : params.row.state == 9
                ? "包装"
                : params.row.state == 10
                ? "发货"
                : "安装"
            ),
        },
        {
          title: "订单创建时间",
          align: "center",
          minWidth: 180,
          key: "crt_time",
          render: (h, params) =>
            h("span", {}, this.func.replaceDate(params.row.crt_time)),
        },
        // {
        //   title: '预估交付日期', align: 'center', minWidth: 200, key: 'predict_time',
        //   render: (h, params) => h('span', {}, this.func.replaceDate(params.row.predict_time, 1))
        // },
        {
          title: "操作",
          align: "center",
          key: "set",
          slot: "set",
          fixed: "right",
          minWidth: 220,
        },
      ],
      modalChargeTablecolumns: [
        { title: "收款项目", align: "center", key: "title" },
        { title: "收款金额", align: "center", key: "price" },
        {
          title: "收款时间",
          align: "center",
          key: "crt_time",
          render: (h, params) =>
            h("span", {}, this.func.replaceDate(params.row.crt_time)),
        },
        { title: "收款备注", align: "center", key: "remark" },
      ],
      modalChargeTableData: [],
      tableData: [],
      page_index: 1,
      page_size: 10,
      total: 0,
      show_lower: false,
      postInfo: {
        //下测量数据
        order_no: "",
        start_time: "",
        end_time: "",
        user_id: null,
      },
      users: [],
      selectIds: null,
      loading: false,
      proxyObj: {},
      headers: { Authorization: localStorage.getItem("token") },
      showModal: false,
      formModalColumns: [
        {
          title: "是否展示",
          align: "center",
          key: "is_show",
          minWidth: 60,
          render: (h, params) => {
            const { index } = params;
            const currentRow = JSON.parse(
              JSON.stringify(this.formModalTableData[index])
            );
            return h("Checkbox", {
              props: {
                value: currentRow.is_show,
              },
              on: {
                "on-change": (e) => {
                  currentRow.is_show = e;
                  this.formModalTableData.splice(index, 1, currentRow);
                },
              },
            });
          },
        },
        {
          title: "字段名",
          align: "center",
          key: "value",
          minWidth: 100,
        },
        {
          title: "展示名称",
          align: "center",
          key: "title",
          minWidth: 100,
          render: (h, params) => {
            const { index } = params;
            const currentRow = JSON.parse(
              JSON.stringify(this.formModalTableData[index])
            );
            return h("Input", {
              props: {
                value: currentRow.title,
                type: "text",
              },
              on: {
                "on-change": (e) => {
                  currentRow.title = e.target.value;
                  this.formModalTableData.splice(index, 1, currentRow);
                },
              },
            });
          },
        },
      ],
      formModalTableData: [
        {
          is_show: true,
          key: "order_no",
          value: "订单编号",
          title: "订单编号",
        },
        {
          is_show: true,
          key: "residential_name",
          value: "项目名称",
          title: "项目名称",
        },
        {
          is_show: true,
          key: "client_name",
          value: "客户姓名",
          title: "客户姓名",
        },
        { is_show: true, key: "address", value: "客户地址", title: "客户地址" },
        { is_show: true, key: "salesman", value: "业务员", title: "业务员" },
        { is_show: true, key: "state", value: "订单状态", title: "订单状态" },
        {
          is_show: true,
          key: "warning_state",
          value: "紧急程度",
          title: "紧急程度",
        },
      ],
      formSet: [],
      tableModalColumns: [
        {
          title: "是否展示",
          align: "center",
          key: "is_show",
          minWidth: 60,
          render: (h, params) => {
            const { index } = params;
            const currentRow = JSON.parse(
              JSON.stringify(this.tableModalTableData[index])
            );
            return h("Checkbox", {
              props: {
                value: currentRow.is_show,
              },
              on: {
                "on-change": (e) => {
                  currentRow.is_show = e;
                  this.tableModalTableData.splice(index, 1, currentRow);
                },
              },
            });
          },
        },
        {
          title: "字段名",
          align: "center",
          key: "value",
          minWidth: 100,
        },
        {
          title: "展示名称",
          align: "center",
          key: "title",
          minWidth: 100,
          render: (h, params) => {
            const { index } = params;
            const currentRow = JSON.parse(
              JSON.stringify(this.tableModalTableData[index])
            );
            return h("Input", {
              props: {
                value: currentRow.title,
                type: "text",
                disabled: currentRow.title == "全选" ? true : false,
              },
              on: {
                "on-change": (e) => {
                  currentRow.title = e.target.value;
                  this.tableModalTableData.splice(index, 1, currentRow);
                },
              },
            });
          },
        },
      ],
      sub_formModalTableData: [],
      tableModalTableData: [
        { is_show: true, key: "selection", value: "全选", title: "全选" },
        {
          is_show: true,
          key: "order_no",
          value: "订单编号",
          title: "订单编号",
        },
        {
          is_show: true,
          key: "residential_name",
          value: "项目名称",
          title: "项目名称",
        },
        { is_show: true, key: "nickname", value: "业务员", title: "业务员" },
        {
          is_show: true,
          key: "client_name",
          value: "客户姓名",
          title: "客户姓名",
        },
        { is_show: true, key: "address", value: "客户地址", title: "客户地址" },
        { is_show: true, key: "crt_name", value: "审核人", title: "审核人" },
        {
          is_show: true,
          key: "warning_state",
          value: "紧急程度",
          title: "紧急程度",
        },
        {
          is_show: true,
          key: "predict_price",
          value: "产品总价",
          title: "产品总价",
        },
        {
          is_show: true,
          key: "fax_price",
          value: "折扣金额",
          title: "折扣金额",
        },
        { is_show: true, key: "price", value: "订单金额", title: "订单金额" },
        { is_show: true, key: "get_money", value: "已收款", title: "已收款" },
        { is_show: true, key: "unget_money", value: "未收款", title: "未收款" },
        { is_show: true, key: "remark", value: "备注", title: "备注" },
        {
          is_show: true,
          key: "start_time",
          value: "订单开始日期",
          title: "订单开始日期",
        },
        {
          is_show: true,
          key: "end_time",
          value: "订单交付日期",
          title: "订单交付日期",
        },
        {
          is_show: true,
          key: "complete_rate",
          value: "生产进度",
          title: "生产进度",
        },
        { is_show: true, key: "state", value: "订单状态", title: "订单状态" },
        {
          is_show: true,
          key: "crt_time",
          value: "订单创建时间",
          title: "订单创建时间",
        },
        { is_show: true, key: "set", value: "操作", title: "操作" },
      ],
      sub_tableModalTableData: [],
      tableSet: [],
      currencyPageId: null,
      chargeModal: false,
      chargeModalForm: {
        order_no: null,
        title: null,
        price: null,
        remark: null,
      },
      warningList: [],
      showSortModal: false,
      sortList: [{ sort: null, level: 1, value: "" }],
      headerList: [],
    };
  },
  computed: {
    ...mapState(["persimissionData"]),
    set_list() {
      if (this.sub_formModalTableData.length < 1) {
        this.list;
      }
      return this.func.computedForm(this.sub_formModalTableData, this.list);
    },
    list() {
      return [
        {
          title: "订单编号",
          name: "Input",
          placeholder: "请输入订单编号",
          value: "",
          serverName: "order_no",
        },
        {
          title: "项目名称",
          name: "Input",
          placeholder: "请输入项目名称",
          value: "",
          serverName: "residential_name",
        },
        {
          title: "客户姓名",
          name: "Input",
          placeholder: "请输入客户姓名",
          value: "",
          serverName: "client_name",
        },
        {
          title: "客户地址",
          name: "Input",
          placeholder: "请输入客户地址",
          value: "",
          serverName: "address",
        },
        {
          title: "业务员",
          name: "Select",
          placeholder: "请输入业务员",
          filterable: true,
          value: "",
          serverName: "salesman",
          optionName: "nickname",
          optionValue: "id",
          option: this.users,
        },
        {
          title: "订单状态",
          name: "Select",
          placeholder: "请选择订单状态",
          serverName: "state",
          value: "",
          option: [
            { label: "全部", value: 0 },
            { label: "测量未审核", value: 1 },
            { label: "测量审核中", value: 2 },
            { label: "测量通过", value: 3 },
            { label: "生产未审核", value: 4 },
            { label: "生产审核中", value: 5 },
            { label: "生产通过", value: 6 },
            { label: "到生产计划", value: 7 },
            { label: "派工", value: 8 },
            { label: "包装", value: 9 },
            { label: "发货", value: 10 },
            { label: "安装", value: 11 },
          ],
        },
        {
          title: "紧急程度",
          name: "Select",
          placeholder: "请选择紧急程度",
          optionName: "title",
          optionValue: "id",
          serverName: "warning_state",
          value: "",
          option: this.warningList,
        },
        {
          title: "制单人",
          name: "Select",
          placeholder: "请选择制单人",
          filterable: true,
          value: "",
          serverName: "crt_name",
          optionName: "nickname",
          optionValue: "id",
          option: this.users,
        },
      ];
    },
    computedTable() {
      if (this.sub_tableModalTableData.length < 1) {
        return this.tableColums;
      }
      return this.func.computedHeader(
        this.sub_tableModalTableData,
        this.tableColums
      );
    },
  },
  watch: {
    computedTable() {
      if (this.computedTable[0].title == "全选") {
        this.headerList = JSON.parse(JSON.stringify(this.computedTable));
        this.headerList.splice(0, 1);
      } else {
        this.headerList = this.computedTable;
      }
    },
  },
  created() {
    // 获取紧急程度
    this.axios.get("/api/warning_list").then((res) => {
      this.warningList = res.data.data;
    });
    this.axios("/api/user", { params: { type: 1 } }).then(
      (res) => (this.users = res.data.data)
    );
    // this.$store.state.navgationData[0].sub[0].sub[0]
    this.currencyPageId = this.$store.state.navgationData[0].sub[0].sub[0].id;
  },
  beforeRouteLeave(to, from, next) {
    if (to.path != "/cms/ordermannage/businessorderlist/edit") {
      this.$route.meta.keepAlive = false;
    } else {
      this.$route.meta.keepAlive = true;
    }
    next();
  },
  methods: {
    init(row) {
      this.page_index = 1;
      row.page_index = this.page_index;
      row.page_size = this.page_size;
      this.proxyObj = row;
      this.getData(row);
    },
    getData(row) {
      this.loading = true;
      this.axios("/api/order_list_new", { params: row }).then((res) => {
        if (res.code == 200) {
          this.loading = false;
          if (!res.data.data) {
            return this.$Message.error("列表数据返回格式不正确");
          }
          this.tableData = res.data.data;
          this.total = res.data.total;
          this.tableModalTableData =
            res.data.tableSet.tableSet.length < 1
              ? this.tableModalTableData
              : res.data.tableSet.tableSet;
          this.formModalTableData =
            res.data.tableSet.formSet.length < 1
              ? this.formModalTableData
              : res.data.tableSet.formSet;
          this.sub_formModalTableData = JSON.parse(
            JSON.stringify(this.formModalTableData)
          );
          this.sub_tableModalTableData = JSON.parse(
            JSON.stringify(this.tableModalTableData)
          );
        }
      });
    },
    changePage(e) {
      this.page_index = e;
      this.proxyObj.page_index = this.page_index;
      this.getData(this.proxyObj);
    },
    changeSize(e) {
      this.page_size = e;
      this.proxyObj.page_size = this.page_size;
      this.getData(this.proxyObj);
    },
    addOrder(n, row) {
      let order_no = row ? row.order_no : "";
      this.$router.push({
        path:
          this.$store.state.userInfo.is_agent == 1
            ? "/cms/ordermannage/businessorderlist/agentorder"
            : "/cms/ordermannage/businessorderlist/edit",
        query: {
          type: n,
          order_no,
        },
      });
    },

    handleChargeModalOk() {
      this.axios
        .post("/api/order_price_add", { ...this.chargeModalForm })
        .then((res) => {
          if (res.code == 200) {
            this.$Message.success(res.msg);
            this.chargeModal = false;
          }
        });
    },
    handleOpenCharge(row) {
      this.chargeModalForm.order_no = row.order_no;
      this.chargeModalForm.title = "";
      this.chargeModalForm.price = "";
      this.chargeModalForm.remark = "";
      this.axios
        .get("/api/order_price", { params: { order_no: row.order_no } })
        .then((res) => {
          this.modalChargeTableData = res.data;
          this.chargeModal = true;
          this.init(this.proxyObj);
        });
    },
    openLower(row, title, url) {
      if (!row) {
        return this.$Message.warning("请至少选择一项");
      }
      this.postInfo.order_no = Array.isArray(row)
        ? row.join(",")
        : row.order_no;
      this.dowmMeasurement({
        url,
        title,
        params: this.postInfo,
        then: () => {
          this.selectIds = [];
          this.postInfo = {};
          this.getData(this.proxyObj);
        },
        cancel: () => {
          this.postInfo = {};
        },
      });
    },
    selectTable(e) {
      let result = [];
      e.map((v) => result.push(v.order_no));
      this.selectIds = result;
    },
    delItems(row) {
      this.confirmDelete({
        content: "确认删除么？",
        then: () => {
          this.axios
            .post("/api/order_del", { order_no: row.order_no, state: 0 })
            .then((res) => {
              if (res.code == 200) {
                this.$Message.success(res.msg);
                this.getData(this.proxyObj);
              }
            });
        },
      });
    },
    async exportData() {
      const res = await this.axios("/api/orders_export", {
        params: { ...this.proxyObj },
      });
      if (res.code == 200) {
        let url = `${this.$store.state.ip}/api/storage/${res.data.file}`;
        location.href = url;
      }
    },
    uploadSuccess(res) {
      if (res.code == 200) {
        this.$Message.success(res.msg || "上传成功");
      } else {
        this.$Message.warning(res.msg || "上传失败");
      }
      this.getData(this.proxyObj);
    },
    uploadError(err) {
      this.$Message.error(err.msg || "上传失败");
    },
    setupTableHeader() {
      this.showModal = true;
      return;
    },
    handleSortSet() {
      this.showSortModal = true;
    },
    handleSortListChange(arr, type, index, obj) {
      if (obj) {
        arr.splice(index + 1, type, obj);
      } else {
        arr.splice(index, type);
      }
    },
    handleConfirmSort() {
      this.loading = true;
      this.axios("/api/order_list_new", {
        params: { ...this.proxyObj, sortList: this.sortList },
      }).then((res) => {
        if (res.code == 200) {
          this.loading = false;
          if (!res.data.data) {
            return this.$Message.error("列表数据返回格式不正确");
          }
          this.tableData = res.data.data;
          this.total = res.data.total;
          this.tableModalTableData =
            res.data.tableSet.tableSet.length < 1
              ? this.tableModalTableData
              : res.data.tableSet.tableSet;
          this.formModalTableData =
            res.data.tableSet.formSet.length < 1
              ? this.formModalTableData
              : res.data.tableSet.formSet;
          this.sub_formModalTableData = JSON.parse(
            JSON.stringify(this.formModalTableData)
          );
          this.sub_tableModalTableData = JSON.parse(
            JSON.stringify(this.tableModalTableData)
          );
        }
      });
    },
    onDragDrop(a, b, table, type) {
      if (type == 2 && (a == 0 || b == 0)) {
        return this.$Message.warning("全选位置不可变");
      }
      table.splice(b, 0, ...table.splice(a, 1));
    },
    handleModalOk() {
      this.formModalTableData.forEach((element, index) => {
        element.sort = index;
      });
      this.tableModalTableData.forEach((element, index) => {
        element.sort = index;
      });
      this.axios({
        method: "post",
        url: "/api/update/table",
        data: {
          id: this.currencyPageId,
          result: {
            formSet: this.formModalTableData,
            tableSet: this.tableModalTableData,
          },
        },
      })
        .then((res) => {
          this.$Message.success(res.msg);
          this.init(this.proxyObj);
        })
        .catch((err) => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.pageSlotStyle {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
.modal_content {
  display: flex;
  justify-content: center;
  // width: 500px;
}
/deep/.ivu-tabs-nav-scroll {
  display: flex;
  justify-content: center;
}
</style>