BST_bigScreen/src/views/newpage/MatchList/matchPage.vue

<template>
  <div>
    <Toptitle title="匹配">
      <Button
        @click="handleAutoMatching"
        v-if="currencyTag == 1"
        type="primary"
        style="margin-right: 10px"
        >自动匹配</Button
      >
      <Button @click="back" v-else type="primary" style="margin-right: 10px"
        >撤销匹配</Button
      >
      <Button @click="back" type="primary" ghost style="margin-right: 10px"
        >返回</Button
      >
    </Toptitle>
    <div class="top-info">
      <Row align="middle">
        <Col span="4">
          <span>项目编号：</span><span>{{ info.project_no }}</span>
        </Col>
        <Col span="4"
          ><span>项目名称：</span><span>{{ info.project_title }}</span>
        </Col>
        <Col span="6" v-if="currencyTag == 1">
          <span>图号：</span>
          <span>
            <Select
              filterable
              multiple
              transfer
              filter-by-label
              v-model="info.image_number"
              :max-tag-count="2"
              style="width: 200px"
            >
              <Option
                v-for="(item, index) in urlSelectList"
                :key="index"
                :label="item"
                :value="item"
              ></Option>
            </Select>
          </span>
        </Col>
        <Col span="6" v-if="currencyTag == 1">
          <span>产品名称：</span>
          <span>
            <Select
              filterable
              multiple
              transfer
              filter-by-label
              v-model="info.product_name"
              :max-tag-count="2"
              style="width: 200px"
            >
              <Option
                v-for="(item, index) in productList"
                :key="index"
                :label="item"
                :value="item"
              ></Option>
            </Select>
          </span>
        </Col>
        <Col span="4" v-if="currencyTag == 1">
          <Button @click="handleSearchUnmatchedInfo" type="primary"
            >确认</Button
          >
        </Col>
      </Row>
    </div>
    <div class="context-tabs">
      <Tabs type="card" @on-click="handleTabsClick" v-model="currencyTag">
        <Button @click="back" type="primary" size="small" slot="extra">
          匹配
        </Button>
        <TabPane label="本次未匹配" name="1">
          <Row>
            <Col
              span="16"
              style="border-top: 1px solid #adb5bd;border-right: 1px solid #adb5bd;padding:10px"
            >
              <div>
                <h1>码单信息</h1>
                <div class="context-unmatched-sheet">
                  <div
                    v-for="url_info in unmatchedObj.urlList"
                    :key="url_info.id"
                    style="padding-top:10px"
                  >
                    <Row type="flex" align="middle">
                      <Col span="4">
                        <span>图号：</span><span>{{ url_info.number }}</span>
                      </Col>
                      <Col span="6">
                        <span>产品名称：</span
                        ><span>{{ url_info.product_name }}</span>
                      </Col>
                      <Col span="4" offset="6">
                        <span>
                          总计
                          <span style="color:red">{{
                            url_info.product_detail_num
                          }}</span>
                          条数据
                        </span>
                      </Col>
                      <Col span="4">
                        <Button
                          @click="handleShowCurrencySheet(url_info)"
                          size="small"
                          type="text"
                          >{{ url_info.isCurrenct ? "收缩" : "展开" }}</Button
                        >
                        <Icon
                          size="20"
                          :type="
                            url_info.isCurrenct
                              ? 'md-arrow-dropdown'
                              : 'md-arrow-dropright'
                          "
                          style="vertical-align: middle;"
                        />
                      </Col>
                    </Row>
                    <div
                      v-if="url_info.isCurrenct"
                      class="context-unmatched-sheet-search"
                    >
                      <Row type="flex" align="middle">
                        <Col span="6">
                          <span>特殊尺寸：</span>
                          <span>
                            <Select
                              filterable
                              filter-by-label
                              transfer
                              v-model="info.wool_size"
                              size="small"
                              style="width: 120px"
                            >
                              <Option
                                v-for="(item, index) in wool_size"
                                :key="index"
                                :label="item"
                                :value="item"
                              ></Option>
                            </Select>
                          </span>
                        </Col>
                        <Col span="6">
                          <span>部件名称：</span>
                          <span>
                            <Select
                              filterable
                              multiple
                              filter-by-label
                              transfer
                              v-model="info.part_name"
                              :max-tag-count="2"
                              size="small"
                              style="width: 120px"
                            >
                              <Option
                                v-for="(item, index) in part_name"
                                :key="index"
                                :label="item"
                                :value="item"
                              ></Option>
                            </Select>
                          </span>
                        </Col>
                        <Col span="6">
                          <span>精裁尺寸：</span>
                          <span>
                            <Select
                              filterable
                              filter-by-label
                              transfer
                              v-model="info.cut_size"
                              size="small"
                              style="width: 120px"
                            >
                              <Option
                                v-for="(item, index) in cut_size"
                                :key="index"
                                :label="item"
                                :value="item"
                              ></Option>
                            </Select>
                          </span>
                        </Col>
                        <Col span="6">
                          <Button
                            @click="getSheetDetailList(url_info)"
                            size="small"
                            type="primary"
                          >
                            搜索
                          </Button>
                        </Col>
                      </Row>
                    </div>
                    <div
                      v-if="url_info.isCurrenct"
                      class="context-unmatched-sheet-table"
                    >
                      <div
                        v-for="table_info in unmatchedObj.part_list"
                        :key="table_info.id"
                      >
                        <div>
                          <Row type="flex" align="middle">
                            <Col span="10" style="padding:10px 0">
                              <span>匹配信息：</span>
                              <span
                                v-for="(match_info, index) in table_info.key
                                  .list"
                                :key="index"
                              >
                                {{ match_info.key }}:{{ match_info.value }}
                              </span>
                            </Col>
                            <Col span="3" offset="11">
                              总计{{ table_info.key.num }}条数据
                            </Col>
                          </Row>
                        </div>
                        <div>
                          <Table
                            :columns="unmatchedSheetTableColumns"
                            border
                            :max-height="500"
                            @on-selection-change="handleSelectChange"
                            :data="table_info.part_list"
                          ></Table>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </Col>
            <Col span="8">
              <div style="border-top: 1px solid #adb5bd;padding:10px">
                <h1>房间信息</h1>
                <div class="context-unmatched-room">
                  <div
                    v-for="url_info in unmatchedObj.urlList"
                    :key="url_info.id"
                    style="padding-top:10px"
                  >
                    <Row type="flex" align="middle">
                      <Col span="4">
                        <span>图号：</span><span>{{ url_info.number }}</span>
                      </Col>
                      <Col span="8">
                        <span>产品名称：</span
                        ><span>{{ url_info.product_name }}</span>
                      </Col>
                      <Col span="6" offset="2">
                        <span>
                          总计
                          <span style="color:red">{{
                            url_info.house_num
                          }}</span>
                          条数据
                        </span>
                      </Col>
                      <Col span="4">
                        <Button
                          @click="handleShowCurrencySheet(url_info)"
                          size="small"
                          type="text"
                          >{{ url_info.isCurrenct ? "收缩" : "展开" }}</Button
                        >
                        <Icon
                          size="20"
                          :type="
                            url_info.isCurrenct
                              ? 'md-arrow-dropdown'
                              : 'md-arrow-dropright'
                          "
                          style="vertical-align: middle;"
                        />
                      </Col>
                    </Row>
                    <div
                      v-if="url_info.isCurrenct"
                      class="context-unmatched-room-search"
                    >
                      <Row type="flex" align="middle">
                        <Col span="12" style="padding:10px 0">
                          <span>区域名称：</span>
                          <span>
                            <Select
                              filterable
                              multiple
                              filter-by-label
                              transfer
                              v-model="info.region"
                              :max-tag-count="2"
                              size="small"
                              style="width: 120px"
                            >
                              <Option
                                v-for="(item, index) in regionList"
                                :key="index"
                                :label="item"
                                :value="item"
                              ></Option>
                            </Select>
                          </span>
                        </Col>
                        <Col span="12" style="padding:10px 0">
                          <span>房号：</span>
                          <span>
                            <Select
                              filterable
                              multiple
                              filter-by-label
                              transfer
                              v-model="info.number"
                              :max-tag-count="2"
                              size="small"
                              style="width: 120px"
                            >
                              <Option
                                v-for="(item, index) in number"
                                :key="index"
                                :label="item"
                                :value="item"
                              ></Option>
                            </Select>
                          </span>
                        </Col>
                        <Col span="12" style="padding:10px 0">
                          <span>特殊尺寸：</span>
                          <span>
                            <Select
                              filterable
                              filter-by-label
                              transfer
                              v-model="info.wool_size"
                              size="small"
                              style="width: 120px"
                            >
                              <Option
                                v-for="(item, index) in wool_size"
                                :key="index"
                                :label="item"
                                :value="item"
                              ></Option>
                            </Select>
                          </span>
                        </Col>
                        <Col span="12" style="padding:10px 0">
                          <Button @click="back" size="small" type="primary"
                            >搜索</Button
                          >
                        </Col>
                      </Row>
                    </div>
                    <div
                      v-if="url_info.isCurrenct"
                      class="context-unmatched-room-table"
                    >
                      <div>
                        <Table
                          :columns="unmatchedRoomTableColumnsUsed"
                          border
                          :max-height="500"
                          @on-selection-change="handleSelectChange"
                          :data="unmatchedRoomList.house_list"
                        ></Table>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </Col>
          </Row>
        </TabPane>
        <TabPane label="本次已匹配" name="2">
          <Row type="flex" align="middle" style="padding:10px 0">
            <Col span="4">
              <span>图号：</span>
              <span>
                <Select
                  filterable
                  multiple
                  filter-by-label
                  transfer
                  v-model="matchedInfo.image_number"
                  :max-tag-count="2"
                  size="small"
                  style="width: 150px"
                >
                  <Option
                    v-for="(item, index) in urlMatchedList"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></Option>
                </Select>
              </span>
            </Col>
            <Col span="4">
              <span>产品名称：</span>
              <span>
                <Select
                  filterable
                  multiple
                  filter-by-label
                  transfer
                  v-model="matchedInfo.product_name"
                  :max-tag-count="2"
                  size="small"
                  style="width: 150px"
                >
                  <Option
                    v-for="(item, index) in productMatchedList"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></Option>
                </Select>
              </span>
            </Col>
            <Col span="2">
              <Button @click="back" size="small" type="primary">
                搜索
              </Button>
            </Col>
          </Row>
          <div
            v-for="matched_info in matchedList"
            :key="matched_info.number"
            class="matched-block"
          >
            <Row>
              <Col span="2">
                <Checkbox v-model="matched_info.isSelect">全选</Checkbox>
              </Col>
              <Col span="2">
                <span>图号：{{ matched_info.image_number }}</span>
              </Col>
              <Col span="2">
                <span>产品名称：{{ matched_info.product_name }}</span>
              </Col>
              <Col span="2" offset="14">
                总计
                <span style="color:red">{{ matched_info.num }}</span>
                条数据
              </Col>
              <Col span="2">
                <Button
                  @click="handleShowCurrencyMatched(matched_info)"
                  size="small"
                  type="text"
                  >{{ matched_info.isCurrenct ? "收缩" : "展开" }}</Button
                >
                <Icon
                  size="20"
                  :type="
                    matched_info.isCurrenct
                      ? 'md-arrow-dropdown'
                      : 'md-arrow-dropright'
                  "
                  style="vertical-align: middle;"
                />
              </Col>
            </Row>
            <Row style="margin-top:20px" v-if="matched_info.isCurrenct">
              <Col span="4">
                <span>区域名称：</span>
                <span>
                  <Select
                    filterable
                    multiple
                    transfer
                    filter-by-label
                    v-model="matchedInfo.region"
                    :max-tag-count="2"
                    size="small"
                    style="width: 150px"
                  >
                    <Option
                      v-for="(item, index) in regionMatchedList"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></Option>
                  </Select>
                </span>
              </Col>
              <Col span="4">
                <span>房号：</span>
                <span>
                  <Select
                    filterable
                    multiple
                    transfer
                    filter-by-label
                    v-model="matchedInfo.number"
                    :max-tag-count="2"
                    size="small"
                    style="width: 150px"
                  >
                    <Option
                      v-for="(item, index) in numberMatchedList"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></Option>
                  </Select>
                </span>
              </Col>
              <Col span="4">
                <span>部件名称：</span>
                <span>
                  <Select
                    filterable
                    multiple
                    transfer
                    filter-by-label
                    v-model="matchedInfo.part_name"
                    :max-tag-count="2"
                    size="small"
                    style="width: 150px"
                  >
                    <Option
                      v-for="(item, index) in partNameMatchedList"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></Option>
                  </Select>
                </span>
              </Col>
              <Col span="2">
                <Button @click="back" size="small" type="primary">
                  搜索
                </Button>
              </Col>
            </Row>
            <div v-if="matched_info.isCurrenct">
              <div
                v-for="(matched_detail, index) in matchedDetailList"
                :key="index"
              >
                <Row type="flex" align="middle">
                  <Col span="10" style="padding:10px 0">
                    <span>匹配信息：</span>
                    <span>匹配信息：</span>
                    <span>匹配信息：</span>
                    <span>匹配信息：</span>
                    <span>匹配信息：</span>
                  </Col>
                </Row>
                <Table
                  :columns="matchedSheetTableColumns"
                  border
                  :max-height="500"
                  @on-selection-change="handleSelectChange"
                  :data="matched_detail.detail"
                >
                  <template slot="setSlot" slot-scope="{ row, index }">
                    <a @click="handleMatchedSet(row, index, 5)">撤销匹配 </a>
                  </template>
                </Table>
              </div>
            </div>
          </div>
        </TabPane>
      </Tabs>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
  name: "",
  components: {},
  props: {},
  // import引入的组件需要注入到对象中才能使用
  data() {
    // 这里存放数据
    return {
      currencyTag: "1", //当前分页
      info: {
        id: this.$route.query.id,
        project_no: this.$route.query.project_no,
        project_title: this.$route.query.project_title,
        cut_size: "",
        number: "",
        part_name: "",
        region: "",
        wool_size: "",
        image_number: [],
        product_name: [],
      },
      matchedInfo: {
        image_number: [],
        product_name: [],
      },
      cut_size: [], //精裁尺寸 未匹配
      number: [], //房号 未匹配
      part_name: [], //部件名称 未匹配
      regionList: [], //区域名称 未匹配
      wool_size: [], //毛料尺寸 未匹配
      urlSelectList: [], //图号列表 未匹配
      productList: [], //产品列表 未匹配
      urlMatchedList: [], //图号列表 已匹配
      productMatchedList: [], //产品列表 已匹配
      regionMatchedList: [], //区域列表 已匹配
      numberMatchedList: [], //房号列表 已匹配
      partNameMatchedList: [], //部件列表 已匹配
      unmatchedObj: {
        urlList: [], //图号列表
        part_list: [
          { part_list: [{ title: 1 }], key: { list: [], num: null } },
          { part_list: [{ title: 1 }], key: { list: [], num: null } },
        ], //当前图号下表格列表
      }, //码单信息
      unmatchedRoomList: {
        urlList: [], //图号列表
        house_list: [{ title: 1 }], //当前图号下表格列表
      }, //房间信息
      matchedList: [
        {
          number: "123",
          product_name: "321",
          isSelect: false,
          product_detail_num: 1,
          detail: [
            {
              title: "333",
            },
          ],
        },
        {
          number: "aaa",
          product_name: "vvv",
          isSelect: true,
          product_detail_num: 2,
          detail: [
            {
              title: "ddd",
            },
          ],
        },
      ],
      matchedDetailList: [],
      unmatchedSheetTableColumns: [
        { title: "全选", align: "center", minWidth: 60, type: "selection" },
        { title: "序号", align: "center", type: "index", minWidth: 60 },
        { title: "部件名称", align: "center", key: "part_name", minWidth: 100 },
        { title: "行号", align: "center", key: "line", minWidth: 60 },
        { title: "木皮1", align: "center", key: "skin1", minWidth: 60 },
        {
          title: "原材料",
          align: "center",
          minWidth: 80,
          render: (h, params) => {
            return h("span", {}, params.row.board1 + params.row.board2);
          },
        },
        { title: "木皮2", align: "center", key: "skin2", minWidth: 60 },
        { title: "毛料尺寸", align: "center", key: "wool_size", minWidth: 80 },
        {
          title: "原料数量",
          align: "center",
          key: "wool_number",
          minWidth: 80,
        },
        { title: "精裁尺寸", align: "center", key: "cut_size", minWidth: 80 },
        {
          title: "零部件数量",
          align: "center",
          key: "cut_number",
          minWidth: 90,
        },
        {
          title: "未匹配数量",
          align: "center",
          key: "unbind_number",
          minWidth: 90,
        },
        { title: "贴皮面积", align: "center", key: "stick", minWidth: 80 },
        { title: "精裁面积", align: "center", key: "cut", minWidth: 80 },
        { title: "工艺要求", align: "center", key: "remark", minWidth: 80 },
      ], //未匹配码单表头
      unmatchedRoomTableColumns: [
        { title: "全选", align: "center", minWidth: 60, type: "selection" },
        { title: "序号", align: "center", type: "index", minWidth: 60 },
        { title: "区域", align: "center", key: "region", minWidth: 60 },
        { title: "房号", align: "center", key: "number", minWidth: 60 },
      ], //未匹配房间表头
      unmatchedRoomTableColumnsUsed: [],
      matchedSheetTableColumns: [
        { title: "全选", align: "center", minWidth: 60, type: "selection" },
        { title: "序号", align: "center", type: "index", minWidth: 60 },
        { title: "区域名称", align: "center", key: "region", minWidth: 100 },
        { title: "房号", align: "center", key: "number", minWidth: 60 },
        { title: "部件名称", align: "center", key: "part_name", minWidth: 80 },
        { title: "行号", align: "center", key: "line", minWidth: 60 },
        { title: "木皮1", align: "center", key: "skin1", minWidth: 60 },
        {
          title: "原材料",
          align: "center",
          minWidth: 80,
          render: (h, params) => {
            return h("span", {}, params.row.board1 + params.row.board2);
          },
        },
        { title: "木皮2", align: "center", key: "skin2", minWidth: 80 },
        { title: "毛料尺寸", align: "center", key: "wool_size", minWidth: 80 },
        {
          title: "原料数量",
          align: "center",
          key: "wool_number",
          minWidth: 80,
        },
        { title: "精裁尺寸", align: "center", key: "cut_size", minWidth: 80 },
        {
          title: "零部件数量",
          align: "center",
          key: "cut_number",
          minWidth: 90,
        },
        { title: "贴皮面积", align: "center", key: "stick", minWidth: 80 },
        { title: "精裁面积", align: "center", key: "cut", minWidth: 80 },
        { title: "工艺要求", align: "center", key: "remark", minWidth: 80 },
        {
          title: "操作",
          align: "center",
          key: "title",
          minWidth: 80,
          slot: "setSlot",
        },
      ], //匹配表头
      unmatchedSelectedList: [],
    };
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  methods: {
    back() {
      this.$router.go(-1);
    },
    handleSelectChange(selection) {
      this.unmatchedSelectedList = this.unmatchedSelectedList.concat(
        selection.map((v) => {
          return v.product_title;
        })
      );
      //  = Array.from(
      //         new Set([...res.data.support_remark, ...this.support_remark])
      //       );
    },
    handleTabsClick(name) {
      name == 2 &&
        this.axios
          .get("/api/bst_matching_on_product_list", {
            params: { id: this.info.id },
          })
          .then((res) => {
            res.data.list.map((v) => {
              v.isCurrenct = false;
            });
            this.matchedList = res.data.list;
            this.urlMatchedList = res.data.image_number;
            this.productMatchedList = res.data.product_name;
            console.log(res);
          });
    },
    handleShowCurrencySheet(row) {
      console.log("row :>> ", row);
      if (row.isCurrenct) {
        row.isCurrenct = !row.isCurrenct;
      } else {
        this.unmatchedObj.urlList.map((v) => (v.isCurrenct = false));
        row.isCurrenct = true;
      }
      this.getSheetDetailList(row);
    },
    handleShowCurrencyMatched(row) {
      console.log("row :>> ", row);
      if (row.isCurrenct) {
        row.isCurrenct = !row.isCurrenct;
      } else {
        this.matchedList.map((v) => (v.isCurrenct = false));
        row.isCurrenct = true;
      }
      this.getMatchedDetailList(row);
    },
    getSheetDetailList(row) {
      row.isCurrenct &&
        this.axios
          .get("/api/bst_matching_un_product_detail", {
            params: {
              cut_order_product_id: row.id,
              id: this.info.id,
              cut_size: this.info.cut_size,
              number: this.info.number,
              part_name: this.info.part_name,
              region: this.info.region,
              wool_size: this.info.wool_size,
            },
          })
          .then((res) => {
            this.unmatchedObj.part_list = res.data.part_list;
            this.unmatchedRoomList.house_list = res.data.house_list;
            this.unmatchedRoomTableColumnsUsed = this.unmatchedRoomTableColumns.concat(
              res.data.head_word.map((v) => {
                return { title: v, align: "center", key: v, minWidth: 60 };
              })
            );
            this.cut_size = res.data.search_word.cut_size;
            this.number = res.data.search_word.number;
            this.part_name = res.data.search_word.part_name;
            this.regionList = res.data.search_word.region;
            this.wool_size = res.data.search_word.wool_size;
          });
    },
    getMatchedDetailList(row) {
      row.isCurrenct &&
        this.axios
          .get("/api/bst_matching_on_product_detail", {
            params: {
              cut_order_product_id: row.id || 14,
              id: this.matchedInfo.id,
              number: this.matchedInfo.number,
              part_name: this.matchedInfo.part_name,
              region: this.matchedInfo.region,
            },
          })
          .then((res) => {
            this.regionMatchedList = res.data.region;
            this.numberMatchedList = res.data.number;
            this.partNameMatchedList = res.data.part_name;
            this.matchedDetailList = res.data.list;
            console.log("res :>> ", res);
          });
    },
    handleSearchUnmatchedInfo() {
      this.axios({
        method: "get",
        url: "/api/bst_matching_un_product_list",
        params: {
          id: this.info.id,
          image_number: this.info.image_number,
          product_name: this.info.product_name,
        },
      }).then((res) => {
        if (res.code == 200) {
          console.log("res :>> ", res);
          res.data.list.map((v) => (v.isCurrenct = false));
          this.unmatchedObj.urlList = res.data.list;
          this.urlSelectList = res.data.image_number;
          this.productList = res.data.product_name;
        }
      });
    },
    handleAutoMatching() {
      this.axios.post('/api/matching_product_house',{
        id:this.info.id,
        image_number:this.info.image_number,
        product_title:this.info.product_name,
      })
      .then(res => {
        console.log(res)
      })
    },
    handleMatchedSet(row, index, type) {},
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="scss" scoped>
.top-info {
  padding: 10px;
  font-size: 18px;
}
.context-tabs {
  position: relative;
  max-height: 650px;
  overflow: hidden;
  overflow-y: auto;
  padding: 15px;
  margin: 10px;
  margin-bottom: 30px;
  border-radius: 5px;
  box-shadow: 1px 1px 5px 1px #999;
  // 未匹配样式
  .context-unmatched-sheet-table,
  .context-unmatched-room-table {
  }
  .context-unmatched-sheet-search,
  .context-unmatched-room-search {
    padding: 10px 0;
  }
  // 匹配样式
  .matched-block {
    padding: 15px;
    margin-bottom: 30px;
    background-color: #e9ecef;
    border-radius: 5px;
  }
}
/deep/.ivu-tabs-nav-scroll {
  display: flex;
  justify-content: center;
}
/deep/.ivu-table-cell {
  padding: 0;
}
</style>