<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin:0px;">
      <div class="filter">
        <label>{{ $t("100088") }}：</label>
        <Select
          v-model="productname"
          clearable
          class="searchSelect"
          filerable
          @on-change="getLine"
        >
          <!--  -->
          <Option v-for="item in products" :value="item.id" :key="item.code"
            >{{ item.name }}({{ item.code }})</Option
          >
        </Select>
      </div>
      <div class="filter">
        <label>{{ $t(500006) }}；</label>
        <Select
          v-model="lineid"
          clearable
          class="searchSelect"
          @on-change="getMachine2"
        >
          <Option
            v-for="item in lines"
            label-in-value
            :value="item.route"
            :key="item.id"
            >{{ item.text }}</Option
          >
        </Select>
      </div>
      <div class="filter">
        <label>{{ $t(100308) }}：</label>
        <Select v-model="machineId" clearable class="searchSelect">
          <Option v-for="item in machineList1" :value="item.id" :key="item.id"
            >{{ item.title }}({{ item.code }})</Option
          >
        </Select>
      </div>
      <div class="filter">
        <label>{{ $t(8205) }}：</label>
        <Select v-model="toolNum" clearable class="searchSelect">
          <Option
            v-for="item in toolList"
            :value="item.text"
            :key="item.text"
            >{{ item.cutter_number }}</Option
          >
        </Select>
      </div>
      <div class="searchBtn">
        <Button
          type="primary"
          class="twoWord"
          icon="ios-search"
          @click="search(1, 10)"
          >{{ $t("1001") }}</Button
        >
        <Button
          type="success"
          class="twoWord"
          icon="md-add-circle"
          @click="add()"
          >{{ $t("1002") }}</Button
        >
        <!-- <Button type="warning" icon="ios-create-outline" @click="edit()">{{$t('1003')}}</Button> -->
        <Button
          type="error"
          class="twoWord intervalRight"
          icon="md-close-circle"
          @click="dele()"
          >{{ $t("1004") }}</Button
        >
        <Button
          type="primary"
          class="fourWord"
          icon="md-download"
          @click="loadexcel()"
          >{{ $t("1005") }}</Button
        >
        <Upload
          style="display:inline-block"
          ref="upload"
          :action="action"
          name="excel-file"
          :headers="headers"
          :show-upload-list="false"
          :on-format-error="handleFormatError"
          :on-success="handleSuccess"
          :on-error="handleError"
          :format="['xlsx']"
        >
          <Button type="primary" class="fourWord" icon="md-cloud-upload">{{
            $t("1006")
          }}</Button>
        </Upload>
        <Button
          type="primary"
          class="fourWord"
          icon="ios-cloud-download"
          @click="Export()"
          >{{ $t("1007") }}</Button
        >
      </div>
    </div>
    <div class="divborder newTableDiv">
      <Table
        class="tableClass"
        @on-current-change="handleRowChange"
        highlight-row
        :data="tableData1"
        @on-selection-change="handleSelectRow"
        :columns="tableColumns1"
      ></Table>
      <div class="pageDiv">
        <div class="pageDirection">
          <Page
            :total="total"
            :current="page"
            @on-change="changePage"
            show-elevator
            show-sizer
            show-total
            @on-page-size-change="handlePageSize"
            :page-size-opts="[10, 20, 30, 40, 100]"
          ></Page>
        </div>
      </div>
    </div>

    <!-- 添加 / 修改弹框 -->
    <Modal
      class="newModalClass"
      v-model="addmodal"
      :styles="{ width: '840px' }"
    >
      <p slot="header">
        <span v-if="type === 1">{{ $t("1002") }}</span>
        <span v-if="type === 2">{{ $t("1003") }}</span>
      </p>
      <div style="width:800px!important;padding-right:40px;">
        <div>
          <div class="filter">
            <label><i>*</i>{{ $t("100088") }}：</label>
            <Select
              v-model="productname"
              clearable
              class="searchSelect"
              filerable
              @on-change="getLine"
            >
              <!--  -->
              <Option v-for="item in products" :value="item.id" :key="item.code"
                >{{ item.name }}({{ item.code }})</Option
              >
            </Select>
          </div>
          <div class="filter">
            <label><i>*</i>{{ $t(500006) }}：</label>
            <Select
              v-model="lineid"
              clearable
              @on-change="getMachine2"
              class="searchSelect"
            >
              <Option
                v-for="item in lines"
                label-in-value
                :value="item.route"
                :key="item.id"
                >{{ item.text }}</Option
              >
            </Select>
          </div>
          <div class="filter">
            <label><i>*</i>{{ $t(100308) }}：</label>
            <Select v-model="machineId" clearable class="searchSelect">
              <Option
                v-for="item in machineList1"
                :value="item.id"
                :key="item.id"
                >{{ item.title }}</Option
              >
            </Select>
          </div>
          <div class="filter">
            <label>
              <i>*</i>
              {{ $t(8205) }}：
            </label>
            <Input
              type="number"
              v-model="toolNum1"
              class="searchInput"
              min="0"
              @blur="change"
              :disabled="type == 2"
            />
            <!-- <InputNumber style="width:160px" v-model="toolNum1" :min="0" /> -->
          </div>
        </div>
        <div>
          <div class="flex">
            <div class="filter">
              <label>
                <i>*</i>
                {{ $t(8204) }}：
              </label>
              <Input
                type="text"
                class="searchInput"
                v-model="tool_code"
                clearable
              />
            </div>
            <div class="filter">
              <Button
                type="primary"
                class="twoWord"
                icon="md-add-circle"
                @click="getModalTable()"
                >{{ $t("1002") }}</Button
              >
            </div>
            <div v-show="type == 1">{{ $t(8216) }}</div>
          </div>
          <div class="modalTable">
            <Table
              style="margin-top:10px;height:360px;"
              @on-current-change="handleRowChange"
              height="360"
              highlight-row
              :data="modalTable"
              @on-selection-change="handleSelectRow"
              :columns="columns1"
            ></Table>
          </div>
        </div>
        <div>
          <!-- <div class="filter">
            <label>{{ $t(8090) }}：</label>
            <Input type="number" class="searchInput" v-model="stretchLong" />
          </div>
          <div class="filter" id="上产线">
            <label>{{ $t(8091) }}：</label>
            <Input type="number" class="searchInput" v-model="uptolerance" />
          </div>
          <div class="filter" id="上产线">
            <label>{{ $t(8092) }}：</label>
            <Input type="number" class="searchInput" v-model="downtolerance" />
          </div> -->
          <div class="filter" id="上产线">
            <label>{{ $t(8093) }}：</label>
            <Input
              type="number"
              min="0"
              v-model="ratedLife"
              class="searchInput"
            />
          </div>
          <div class="filter" id="上工位">
            <label>{{ $t(1030) }}：</label>
            <Input type="text" class="searchInput" v-model="remark" />
          </div>
        </div>
      </div>
      <div slot="footer">
        <Button type="text" size="large" @click="closeadd()">{{
          $t("1033")
        }}</Button>
        <Button
          type="primary"
          v-if="type === 1"
          size="large"
          @click="adddata()"
          >{{ $t("1002") }}</Button
        >
        <Button
          type="primary"
          v-if="type === 2"
          size="large"
          @click="editdata()"
          >{{ $t("1003") }}</Button
        >
      </div>
    </Modal>
  </div>
</template>
<script>
import axios from "@/libs/api.request";
export default {
  name: "productmanagement", // 组件不刷新
  data() {
    return {
      action: axios.publicPath + "ims/Upload/Submit?templateName=TechMouldList",
      headers: {
        token: localStorage.getItem("token"),
        timestamp: localStorage.getItem("timestamp"),
        nonce: localStorage.getItem("nonce"),
        sign: localStorage.getItem("sign")
      },
      products: [], // 产品
      productname: "",
      addproductid: 0,
      lines: [],
      lineid: "",
      toolNum: "", // 刀位号
      toolList: [],
      // 模态框变量
      toolNum1: 0,
      category: "",
      materialName: "",
      all: [],
      loading: true,
      modalTable: [], // 框内表格
      columns1: [
        {
          type: "selection",
          width: 70,
          align: "center"
        },
        {
          type: "index2",
          title: this.$t("1008"),
          key: "xuhao",
          render: (h, params) => {
            return h(
              "span",
              params.index + (this.page - 1) * this.pagesize + 1
            );
          },
          width: "70px"
        },
        {
          title: this.$t(600648),
          key: "category",
          width: 100
        },
        {
          title: this.$t(100391),
          key: "name"
        },
        {
          title: this.$t(900933),
          key: "part_no"
        },
        {
          title: this.$t(600011),
          key: "supplier"
        },
        {
          title: this.$t(600647),
          key: "quantity",
          render: (h, params) => {
            let count = 1;
            this.modalTable[params.index][params.column.key] = 1;
            return h("span", count);
          }
        }
      ],
      selection: [],
      editSelection: {},
      stretchLong: "",
      uptolerance: "",
      downtolerance: "",
      ratedLife: "",
      remark: "",
      tableData1: [],
      total: 0,
      page: 1,
      pagesize: 10,
      addmodal: false,
      editmodal: false,
      detailobj: {},
      editobj: {},
      type: 0,
      tool_code: "",
      editLines: [],
      editPreLines: [],
      editStations: [],
      editPreStations: [],
      editResults: [],
      tableColumns1: [
        {
          type: "index2",
          title: this.$t("1008"),
          key: "xuhao",
          render: (h, params) => {
            return h(
              "span",
              params.index + (this.page - 1) * this.pagesize + 1
            );
          },
          width: "70px"
        },
        {
          title: this.$t(8205),
          key: "cutter_number"
        },
        {
          title: this.$t(8204),
          key: "tool_code"
        },
        {
          title: this.$t(600648),
          key: "category_name"
        },
        {
          title: this.$t(100391),
          key: "material_name"
        },
        {
          title: this.$t(900933),
          key: "part_no"
        },
        {
          title: this.$t(600011),
          key: "supplier"
        },
        {
          title: this.$t(600647),
          key: "quantity"
        },
        // {
        //   title: this.$t(8090),
        //   key: "reach_length"
        // },
        // {
        //   title: this.$t(8091),
        //   key: "upper_tolerance"
        // },
        // {
        //   title: this.$t(8092),
        //   key: "down_tolerance"
        // },
        {
          title: this.$t(1030),
          key: "remark"
        },
        {
          title: this.$t(600037),
          key: "rated_life"
        }
      ],
      machineId: "",
      machineList1: [],
      searched: []
    };
  },
  created() {
    this.iniproducts();
    // this.inilines();
    // 格式化表格样式
    this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1);

    this.productname = this.$route.query.productId;
    this.inilines(this.productname);
    this.lineid = this.$route.query.route;

    this.getMachine();
    this.machineId = this.$route.query.machine_type;
    // this.mac = this.$route.query.route;

    if (this.productname && this.lineid && this.machineId) {
      this.search(1, 10);
      this.getToolNum();
    }
  },
  methods: {
    iniproducts() {
      var params = {
        name: "",
        count: 50
      };
      axios
        .request({
          url: "/config/ProjectProduct/GetProductsByCode",
          params,
          method: "get"
        })
        .then(res => {
          // console.log(res.data.data);
          this.products = res.data.data;
        });
    },
    inilines(id) {
      axios
        .request({
          url: "/ims/Technology/GetRoutes?productid=" + id,
          method: "get"
        })
        .then(res => {
          // console.log(res.data.data);
          if (res.data.ret == 1) {
            this.lines = res.data.data;
          }
        });
    },
    getLine(value) {
      this.productname = value;

      this.inilines(this.productname);
      this.lineid = "";
      this.getMachine();
    },
    getToolNum() {
      let params = {
        productid: this.productname,
        route: this.lineid,
        machine_type: this.machineId
      };
      axios
        .request({
          url: "/ims/TechTool/GetCutterNumbers",
          params,
          method: "get"
        })
        .then(res => {
          if (res.data.ret == 1) {
            this.toolList = res.data.data;
          }
          // this.total = res.data.total;
          // this.mockTableData1(res.data.data);
        });
    },
    getMachine2(val) {
      if (val) {
        this.lineid = val;
        this.getMachine();
      }
    },
    getMachine() {
      this.request(
        "/ims/Technology/GetTechMachine?product_id=" +
          this.productname +
          "&route=" +
          this.lineid,
        "",
        "get"
      ).then(res => {
        if (res.data.ret == 1) {
          // this.machineList = res.data.data;
          this.machineList1 = res.data.data;
        }
      });
    },
    getModalTable() {
      if (
        this.tool_code == "" ||
        this.tool_code == undefined ||
        this.tool_code == null
      ) {
        this.$Message.error("请输入模具号");
        return false;
      }

      // if (this.searched.indexOf(this.tool_code) > -1) {
      //     this.$Message.error("已添加该模具号");
      //     return false;
      // } else {
      //     this.searched.push(this.tool_code);
      // }
      let params = {
        productid: this.productname,
        route: this.lineid,
        cutter_number: this.toolNum,
        category: this.category,
        name: this.materialName,
        tool_code: this.tool_code
        // machine_type:this.machineId
      };
      this.loading = true;
      axios
        .request({
          url: "/ims/ToolInfo/GetMaterials",
          params,
          method: "get"
        })
        .then(res => {
          if (res.data.ret == 1) {
            let arr = JSON.stringify(res.data.data);
            this.all = JSON.parse(arr);
            // list = res.data.data;
            // list.forEach((ele) => {
            //     this.modalTable.push(ele);
            // });
            if (res.data.data.length == 0) {
              this.$Message.error("请输入正确的模具号");
            }
            this.modalTable = res.data.data;
            // this.renderTable(res.data.data);
            this.loading = false;
          } else {
            this.$Message.error(this.$t(res.data.msg));
          }
        });
    },
    renderTable(tablelist) {
      let data = [];
      tablelist.forEach(item => {
        if (item) {
          data.push({
            category: item.category,
            id: item.id,
            isselected: item.isselected,
            name: item.name,
            part_no: item.part_no,
            quantity: 1,
            supplier: item.supplier,
            _checked: false
          });
        }
      });
      this.modalTable = data;
    },
    search(page, pagesize) {
      if (this.productname == "" || this.productname == undefined) {
        this.$Message.error(this.$t(8094));
        return false;
      }
      if (this.lineid == "" || this.lineid == undefined) {
        this.$Message.error(this.$t(8094));
        return false;
      }

      var data = {
        product_id: "" + this.productname,
        route: "" + this.lineid,
        cutter_number: this.toolNum,
        page: page,
        pagesize: pagesize,
        machine_type: this.machineId
      };
      axios
        .request({
          url: "/ims/TechTool/GetPagedList",
          data,
          method: "post"
        })
        .then(res => {
          if (res.data.ret == 1) {
            this.total = res.data.total;
            this.mockTableData1(res.data.data);
          } else {
            this.$Message.error(this.$t(res.data.msg));
            this.tableData1 = [];
          }
        });
      this.getToolNum();
    },
    mockTableData1(tablelist) {
      let data = [];
      tablelist.forEach(item => {
        if (item) {
          data.push({
            cutter_number: item.cutter_number,
            category_name: item.category_name,
            material_name: item.material_name,
            material_id: item.material_id,
            part_no: item.part_no,
            supplier: item.supplier,
            quantity: item.quantity,
            reach_length: item.reach_length,
            upper_tolerance: item.upper_tolerance,
            down_tolerance: item.down_tolerance,
            remark: item.remark,
            rated_life: item.rated_life,
            fromLineId: item.fromLineId,
            result: item.result,
            resultStatus: item.resultStatus,
            eventNo: item.eventNo,
            id: item.id,
            tool_code: item.tool_code
          });
        }
      });
      this.tableData1 = data;
    },
    change(e) {
      // console.log(e);
      this.toolNum1 = e.target.value;
      // console.log(this.toolNum1);
      var re = /^[0-9]+.?[0-9]*/; // 判断字符串是否为数字//判断正整数/[1−9]+[0−9]∗]∗/
      if (!re.test(this.toolNum1)) {
        this.$Message.error(this.$t(8095));
      }
    },
    add() {
      this.toolNum1 = 0;
      this.category = "";
      this.materialName = "";
      this.stretchLong = "";
      this.uptolerance = "";
      this.downtolerance = "";
      this.ratedLife = "";
      this.remark = "";
      this.type = 1;
      this.loading = true;
      this.selection = [];
      this.tool_code = "";
      this.modalTable = [];
      this.searched = [];
      // this.renderTable(this.all);
      // this.loading = false;
      this.addmodal = true;
    },
    closeadd() {
      this.addmodal = false;
      // this.search(1, 10);
      this.detailobj = {};
    },
    adddata() {
      if (
        this.toolNum1 == undefined ||
        this.toolNum1 == "" ||
        this.toolNum1 == 0
      ) {
        this.$Message.error(this.$t(8096));
        return false;
      }

      let arr = [];

      if (this.selection.length > 0) {
        for (let i = 0; i < this.selection.length; i++) {
          let obj = {};
          obj.part_no = this.selection[i].part_no;
          obj.quantity = this.selection[i].quantity;
          arr.push(obj);
        }
      } else {
        this.$Message.error(this.$t(1950603));
        return false;
      }

      let data = {
        location: this.toolNum1,
        reach_length: this.stretchLong,
        upper_tolerance: this.uptolerance,
        down_tolerance: this.downtolerance,
        remark: this.remark,
        rated_life: this.ratedLife,
        product_id: "" + this.productname,
        route: "" + this.lineid,
        Materials: arr,
        tool_code: this.tool_code,
        machine_type: this.machineId
      };

      axios
        .request({
          url: "/ims/TechTool/Add",
          data,
          method: "post"
        })
        .then(res => {
          if (res.data.ret === 1) {
            this.$Message.success(this.$t("1055"));
            this.addmodal = false;
            this.search(this.page, this.pagesize);
          } else {
            this.$Message.error(this.$t(res.data.msg));
          }
        });
    },
    dele() {
      if (
        this.detailobj === undefined ||
        this.detailobj.id === undefined ||
        this.detailobj.id === 0
      ) {
        this.$Message.error(this.$t("1017"));
        return false;
      } else {
        this.$Modal.confirm({
          title: this.$t("1018"),
          content: "",
          width: "290px",
          closable: true,
          okText: this.$t("1004"),
          onOk: () => {
            axios
              .request({
                url: "/ims/TechTool/Delete?id=" + this.detailobj.id,

                method: "post"
              })
              .then(res => {
                if (res.data.ret === 1) {
                  this.$Message.success(this.$t("1058"));
                  this.tableData1 = this.search(this.page, this.pagesize);
                  this.detailobj = {};
                  this.search(1, 10);
                } else {
                  this.$Message.error(this.$t(res.data.msg));
                }
              });
          }
        });
      }
    },
    edit() {
      if (this.detailobj.id == undefined || this.detailobj.id == "") {
        this.$Message.error(this.$t(200231));
        return false;
      }
      this.toolNum1 = this.detailobj.cutter_number;
      this.stretchLong = this.detailobj.reach_length;
      this.uptolerance = this.detailobj.upper_tolerance;
      this.downtolerance = this.detailobj.down_tolerance;
      this.ratedLife = this.detailobj.rated_life;
      this.remark = this.detailobj.remark;
      this.tool_code = this.detailobj.tool_code;
      this.getModalTable();
      this.selection = [];
      let params = {
        productid: this.productname,
        route: this.lineid,
        cutter_number: "",
        category: "",
        name: ""
      };
      this.loading = true;
      // axios
      //     .request({
      //         url: "/ims/ToolInfo/GetMaterials",
      //         params,
      //         method: "get"
      //     })
      //     .then(res => {
      //         // console.log(res.data);
      //         if (res.data.ret == 1) {
      //             this.modalTable = res.data.data;
      //             this.modalTable.forEach(ele => {
      //                 if (ele.id == this.detailobj.material_id) {
      //                     ele.quantity = this.detailobj.quantity;
      //                     ele._checked = true;
      //                     this.editSelection = ele;
      //                     this.selection.push(ele);
      //                 } else {
      //                     ele._checked = false;
      //                     ele.quantity = 0;
      //                 }
      //             });
      //             // this.renderTable(res.data.data);
      //             this.loading = false;
      //         }
      //     });
      this.addmodal = true;
      this.type = 2;
    },
    editdata() {
      // if (
      //     this.checknodeid == undefined ||
      //     this.addcurrentsectionid === undefined ||
      //     this.addcurrentsectionid === 0
      // ) {
      //     this.$Message.error(this.$t("950460"));
      //     return false;
      // }
      // if (
      //     this.addproductid === undefined ||
      //     this.routename === undefined
      // ) {
      //     this.$Message.error(this.$t(200232));
      //     return false;
      // }
      let arr = [];
      if (this.selection.length > 0) {
        for (let i = 0; i < this.selection.length; i++) {
          let obj = {};
          obj.part_no = this.selection[i].part_no;
          obj.quantity = this.selection[i].quantity;
          arr.push(obj);
        }
      }

      let data = {
        id: this.detailobj.id,
        location: this.toolNum1,
        reach_length: this.stretchLong,
        upper_tolerance: this.uptolerance,
        down_tolerance: this.downtolerance,
        remark: this.remark,
        rated_life: this.ratedLife,
        product_id: "" + this.productname,
        route: "" + this.lineid,
        Materials: arr
      };
      //   console.log(data);
      // return false;
      axios
        .request({
          url: "/ims/TechTool/Edit",
          data,
          method: "post"
        })
        .then(res => {
          if (res.data.ret === 1) {
            this.$Message.success(this.$t("1060"));
            this.detailobj = {};
            this.addmodal = false;
            this.search(this.page, this.pagesize);
          } else {
            this.$Message.error(this.$t(res.data.msg));
          }
        });
    },
    handleSelectRow(data) {
      this.selection = [];
      if (data.length > 0) {
        this.modalTable.forEach(ele => {
          ele._checked = false;
          data.forEach(item => {
            if (ele.id == item.id) {
              ele._checked = true;
              this.selection.push(ele);
            }
          });
        });
      }
      //   console.log(this.selection);
    },
    // updateData(id, val) {
    //     this.modalTable.forEach(ele => {
    //         if (ele.id == id) {
    //             ele.quantity = val;
    //             ele._checked = true;
    //             this.editSelection = ele;
    //         }
    //     });
    // },
    handleRowChange(currentRow, oldCurrentRow) {
      this.detailobj = currentRow;
      //   console.log(this.detailobj);
    },
    handlePageSize(value) {
      this.pagesize = value;
      this.tableData1 = this.search(this.page, this.pagesize);
    },
    changePage(value) {
      this.page = value;
      this.tableData1 = this.search(this.page, this.pagesize);
    },
    handleFormatError(file) {
      this.$Message.error(this.$t("950396") + file.name + this.$t("950397"));
    },
    handleSuccess(res, file) {
      if (res.ret == 1) {
        this.$Message.success(this.$t("950398"));
      } else {
        if ((res.msg + "").indexOf(",") != -1) {
          inittip(res.msg);
        } else {
          this.$Message.error(this.$t(res.msg));
        }
      }
    },
    handleError() {
      this.$Message.error(this.$t("2010006") + "!");
    },
    loadexcel() {
      axios
        .request({
          url: "/config/download/GetTemplate?name=TechMouldList",
          method: "get"
        })
        .then(res => {
          if (res.data.ret === 1) {
            window.location.href = axios.publicPath + "" + res.data.data;
          } else {
            this.$Message.error(this.$t(res.data.msg));
          }
        });
    },
    Export() {
      let data = {
        product_id: this.productname,
        route: this.lineid,
        cutter_number: this.toolNum,
        toexcel: 1
      };
      axios
        .request({
          url: "/ims/TechTool/GetPagedList",
          data,
          method: "post"
        })
        .then(res => {
          if (res.data.ret === 1) {
            window.location.href = axios.publicPath + "" + res.data.data;
          } else {
            this.$Message.error(this.$t(res.data.msg));
          }
        });
    },
    unloadexcel() {
      let file = this.readyFiles[0];
      const data = new FormData();
      data.append("file", file);
      data.append("type", 2);
      axios
        .request({
          url: "/ims/Upload/Submit?templateName=TechToolList",
          data,
          method: "post"
        })
        .then(res => {
          if (res.ret === 1) {
            this.$Message.success(this.$t("100378"));
          } else {
            this.$Message.error(this.$t(res.data.msg));
          }
        })
        .catch(err => {
          alert(err.msg);
        });
    },
    request(url, data, type) {
      if (type == "get") {
        return this.axios
          .request({
            url: url,
            params: data,
            method: type
          })
          .then(res => {
            return res;
          })
          .catch(error => error);
      } else {
        return this.axios
          .request({
            url: url,
            data,
            method: type
          })
          .then(res => {
            return res;
          })
          .catch(error => error);
      }
    }
  }
};
</script>
<style lang="less" scoped>
.flex {
  display: flex;
  height: 40px;
  line-height: 40px;
}
.modalTable {
  // width: 680px;
  height: 400px;
  overflow: auto;
  margin: 0 auto;
}
</style>
