jf-frock/src/views/BidSystem/ContractList/info.vue

<template>
  <div class="BidSystemContractInfo">
    <Toptitle title="查看工装订单">
      <slot name="titleButton">
        <!-- <Button
          type="primary"
          style="margin-right: 10px"
          :disabled="isChecked"
          @click="showAddInputModal = true"
        >
          添加特殊字段
        </Button> -->
        <!-- <Button
          @click="showForms = true"
          v-show="currencyTab == 'name2'"
          type="primary"
          style="margin-right: 10px"
          >表单设置</Button
        > -->
        <Button
          @click="handleOpenModal"
          v-show="currencyTab == 'name2'"
          type="primary"
          style="margin-right: 10px"
          >批量下深化</Button
        >
        <Button
          @click="handleOpenModal"
          v-show="currencyTab != 'name2'"
          type="primary"
          style="margin-right: 10px"
          >下深化</Button
        >
        <Button
          @click="showSupModal = true"
          type="primary"
          style="margin-right: 10px"
          >项目辅料</Button
        >
        <Button
          @click="goback()"
          type="primary"
          ghost
          style="margin-right: 10px"
          >返回</Button
        >
      </slot>
    </Toptitle>
    <Tabs value="name1" @on-click="handleCurTabChange">
      <TabPane
        label="块状形式"
        name="name1"
        style="overflow: hidden; overflow-y: auto"
      >
        <div class="top_search">
          <Form :model="formData" :label-width="100" class="top_search_form">
            <FormItem label="订单号:">
              {{ formData.order_no }}
            </FormItem>
            <FormItem label="项目名称:">
              {{ formData.residential_name }}
            </FormItem>
            <FormItem label="客户姓名:">
              {{ formData.client_name }}
            </FormItem>
            <FormItem label="紧急程度:">
              <span
                v-for="_item in warningList"
                :key="_item.id"
                v-show="_item.id == formData.warning_state"
                :style="{ color: _item.color }"
                >{{ _item.title }}
              </span>
            </FormItem>
            <FormItem label="项目定金:">
              {{ formData.front_money }}
              <!-- <RadioGroup v-model="formData.pay_state"
                      size="small">
            <Radio :label=0
                   :disabled="isChecked">未收款</Radio>
            <Radio :label=1
                   :disabled="isChecked">已收款</Radio>
          </RadioGroup> -->
            </FormItem>
            <FormItem label="详细地址:">
              {{ formData.address }}
            </FormItem>
            <FormItem label="手机号:">
              {{ formData.mobile }}
            </FormItem>
            <FormItem label="开始日期:">
              {{
                formData.start_time
                  ? func.replaceDateNoHMS(formData.start_time)
                  : ""
              }}
            </FormItem>
            <FormItem label="结束日期:">
              {{
                formData.end_time
                  ? func.replaceDateNoHMS(formData.end_time)
                  : ""
              }}
            </FormItem>
            <FormItem label="业务员:">
              <span
                v-for="_item in salesmanList"
                :key="_item.id"
                v-show="_item.id == formData.salesman"
                :style="{ color: _item.color }"
                >{{ _item.nickname }}
              </span>
            </FormItem>
            <!-- <FormItem label="订单类型:">
          <Select v-model="formData.type"
                  :disabled="isChecked"
                  size="small"
                  style="width:200px">
            <Option label='工装'
                    :value=1></Option>
            <Option label='家装'
                    :value=2></Option>
          </Select>
        </FormItem> -->
            <FormItem
              v-for="item in formData.special"
              :key="item.id"
              :label="item.key + ':'"
            >
              {{ item.value }}
            </FormItem>
            <FormItem label="备注:">
              {{ formData.remark }}
            </FormItem>
          </Form>
        </div>
        <div
          class="addArea"
          v-for="(areaItem, areaIndex) in formData.list"
          :key="areaItem.areaIndex"
        >
          <div class="addAreaBtn">
            <Button
              @click="handleShowCurrencyArea(areaItem, areaIndex)"
              size="small"
              type="primary"
              style="margin-right:10px"
              v-show="!(areaItem.product && areaItem.product.length > 0)"
              >展示产品</Button
            >
            <!-- <Button
              @click="handleHiddenCurrencyArea(areaItem, areaIndex)"
              size="small"
              type="primary"
              style="margin-right:10px"
              v-show="areaItem.product && areaItem.product.length > 0"
              >收缩</Button
            > -->
            <Button
              @click="handleOpenModal(areaItem.id)"
              size="small"
              type="primary"
              style="margin-right:10px"
              >下深化</Button
            >
            <!-- <Button
              size="small"
              type="primary"
              v-show="areaItem.isAllDeeped && areaItem.product.length > 0"
              >已下深化</Button
            > -->
          </div>
          <div class="addAreaForm">
            <Form :label-width="100" :model="areaItem" style="width: 60%">
              <FormItem label="区域编码:">
                {{ areaItem.num }}
              </FormItem>
              <FormItem label="区域名称:">
                {{ areaItem.title }}
              </FormItem>
              <FormItem label="单位:">
                {{ areaItem.unit }}
              </FormItem>
              <FormItem label="工程量:">
                {{ areaItem.quantity }}
              </FormItem>
              <FormItem label="户型:">
                {{ areaItem.house_type }}
              </FormItem>
              <FormItem
                v-for="item in areaItem.special"
                :key="item.id"
                :label="item.key + ':'"
              >
                {{ item.value }}
              </FormItem>
              <FormItem label="备注:">
                {{ areaItem.remark }}
              </FormItem>
            </Form>
          </div>
          <div class="addAreaTable">
            <Table
              v-show="areaItem.isCurrencyArea"
              :columns="tableColumns"
              @on-selection-change="handleSelection"
              :data="areaItem.product"
              max-height="600"
              border
            >
              <template slot="set" slot-scope="{ row, index }">
                <a
                  :disabled="row.sub_state >= 1"
                  @click="handleRowDeep(row, index)"
                  >下深化</a
                >
              </template>
            </Table>
          </div>
        </div>
        <li v-show="false" v-for="item in formData.list" :key="item.id"></li>
      </TabPane>
      <TabPane
        label="列表形式"
        name="name2"
        style="overflow: hidden; overflow-y: auto"
      >
        <div class="top_search">
          <div class="top_search_content">
            <Form
              :model="searchData"
              :label-width="100"
              class="top_search_form"
            >
              <FormItem label="区域编码:">
                <Select
                  filterable
                  clearable
                  v-model="searchData.area_no"
                  size="small"
                  style="width:120px"
                >
                  <Option
                    v-for="(_item, _index) in area_no_list"
                    :key="_index"
                    :label="_item"
                    :value="_item"
                  ></Option>
                </Select>
                <!-- <Input
                  type="text"
                  size="small"
                  clearable
                  v-model="searchData.area_no"
                  placeholder="请输入区域编码"
                  style="width: 120px"
                /> -->
              </FormItem>
              <FormItem label="区域名称:">
                <Select
                  filterable
                  clearable
                  v-model="searchData.area_title"
                  size="small"
                  style="width:120px"
                >
                  <Option
                    v-for="(_item, _index) in area_title_list"
                    :key="_index"
                    :label="_item"
                    :value="_item"
                  ></Option>
                </Select>
                <!-- <Input
                  type="text"
                  size="small"
                  clearable
                  v-model="searchData.area_title"
                  placeholder="请输入区域名称"
                  style="width: 120px"
                /> -->
              </FormItem>
              <FormItem label="产品名称:">
                <Select
                  filterable
                  clearable
                  v-model="searchData.product_title"
                  size="small"
                  style="width:120px"
                >
                  <Option
                    v-for="(_item, _index) in product_title_list"
                    :key="_index"
                    :label="_item"
                    :value="_item"
                  ></Option>
                </Select>
                <!-- <Input
                  type="text"
                  size="small"
                  clearable
                  v-model="searchData.product_title"
                  placeholder="请输入产品名称"
                  style="width: 120px"
                /> -->
              </FormItem>
              <FormItem label="图号:">
                <Select
                  filterable
                  clearable
                  v-model="searchData.url_number"
                  size="small"
                  style="width:120px"
                >
                  <Option
                    v-for="(_item, _index) in url_number_list"
                    :key="_index"
                    :label="_item"
                    :value="_item"
                  ></Option>
                </Select>
                <!-- <Input
                  type="text"
                  size="small"
                  clearable
                  v-model="searchData.url_number"
                  placeholder="请输入图号"
                  style="width: 120px"
                /> -->
              </FormItem>
              <FormItem label="深化状态:">
                <Select
                  clearable
                  v-model="searchData.sub_state"
                  size="small"
                  style="width:120px"
                >
                  <Option label="未下深化" :value="0"></Option>
                  <Option label="深化中" :value="1"></Option>
                  <Option label="深化完成" :value="2"></Option>
                </Select>
              </FormItem>
              <FormItem>
                <Button @click="getListData" type="primary" size="small"
                  >搜索</Button
                >
              </FormItem>
            </Form>
          </div>
          <Form :model="formData" :label-width="100" class="top_search_form">
            <FormItem label="订单号:">
              {{ formData.order_no }}
            </FormItem>
            <FormItem label="项目名称:">
              {{ formData.residential_name }}
            </FormItem>
            <FormItem label="客户姓名:">
              {{ formData.client_name }}
            </FormItem>
            <FormItem label="紧急程度:">
              <span
                v-for="_item in warningList"
                :key="_item.id"
                v-show="_item.id == formData.warning_state"
                :style="{ color: _item.color }"
                >{{ _item.title }}
              </span>
            </FormItem>
            <FormItem label="项目定金:">
              {{ formData.front_money }}
              <!-- <RadioGroup v-model="formData.pay_state"
                      size="small">
            <Radio :label=0
                   :disabled="isChecked">未收款</Radio>
            <Radio :label=1
                   :disabled="isChecked">已收款</Radio>
          </RadioGroup> -->
            </FormItem>
            <FormItem label="详细地址:">
              {{ formData.address }}
            </FormItem>
            <FormItem label="手机号:">
              {{ formData.mobile }}
            </FormItem>
            <FormItem label="开始日期:">
              {{
                formData.start_time
                  ? func.replaceDateNoHMS(formData.start_time)
                  : ""
              }}
            </FormItem>
            <FormItem label="结束日期:">
              {{
                formData.end_time
                  ? func.replaceDateNoHMS(formData.end_time)
                  : ""
              }}
            </FormItem>
            <FormItem label="业务员:">
              <span
                v-for="_item in salesmanList"
                :key="_item.id"
                v-show="_item.id == formData.salesman"
                :style="{ color: _item.color }"
                >{{ _item.nickname }}
              </span>
            </FormItem>
            <!-- <FormItem label="订单类型:">
          <Select v-model="formData.type"
                  :disabled="isChecked"
                  size="small"
                  style="width:200px">
            <Option label='工装'
                    :value=1></Option>
            <Option label='家装'
                    :value=2></Option>
          </Select>
        </FormItem> -->
            <FormItem
              v-for="item in formData.special"
              :key="item.id"
              :label="item.key + ':'"
            >
              {{ item.value }}
            </FormItem>
            <FormItem label="备注:">
              {{ formData.remark }}
            </FormItem>
          </Form>
        </div>
        <div>
          <Table
            :columns="listTableColumns"
            :data="listTableData"
            @on-selection-change="handleSelection"
            :max-height="500"
            border
          >
            <template slot="set" slot-scope="{ row, index }">
              <a
                :disabled="row.sub_state >= 1"
                @click="handleRowDeep(row, index)"
                >下深化</a
              >
            </template>
          </Table>
        </div>
        <div ref="footercenter" class="footer-center">
          <Page
            transfer
            :total="total"
            :current.sync="page_index"
            :show-total="true"
            :page-size="page_size"
            :show-sizer="true"
            :show-elevator="true"
            @on-change="changePage"
            @on-page-size-change="changeSize"
          >
          </Page>
        </div>
      </TabPane>
    </Tabs>
    <!-- 项目辅料弹窗 -->
    <Modal title="项目辅料" v-model="showSupModal" :width="400">
      <div>
        <Table :columns="supTableColumns" :data="supTableData" border>
          <template slot="combine" slot-scope="{ index }">
            <!-- <Select
              v-model="supTableData[index].id"
              @on-change="handlechange"
              size="small"
            >
              <Option
                v-for="item in combineList"
                :value="item.id"
                :key="item.id"
                :label="item.title"
              ></Option>
            </Select> -->
            <span
              v-for="_item in combineList"
              :key="_item.id"
              v-show="_item.id == supTableData[index].id"
            >
              {{ _item.title }}
            </span>
          </template>
          <template slot="supSet" slot-scope="{ row, index }">
            <a
              style="margin: 0 5px; color: red"
              v-show="$route.query.type != 3"
              @click="handleSupSet(row, index)"
              >删除</a
            >
          </template>
        </Table>
      </div>
      <div class="modal-footer" slot="footer">
        <Button @click="showSupModal = false">取消</Button>
        <Button type="primary" @click="showSupModal = false">确认</Button>
      </div>
    </Modal>
    <!-- 编辑产品弹窗 -->
    <Modal
      title="编辑产品"
      v-model="showPDTEditModal"
      :mask-closable="false"
      class="addPDTFormModal"
      :width="1000"
    >
      <div class="modal-footer" slot="footer"></div>
    </Modal>
    <!-- 特殊字段弹窗 -->
    <Modal
      title="特殊字段"
      v-model="showAddInputModal"
      :mask-closable="false"
      class="addInputClassModal"
      :width="600"
    >
      <div class="addInputClass">
        <Tabs value="name1">
          <TabPane label="订单特殊字段" name="name1">
            <div style="display: flex; justify-content: center">
              <span
                class="dele_icon"
                @click="handleSpecValueAdd('', 1)"
                style="text-align: center; width: 50px"
                >添加
              </span>
            </div>
            <div class="addInputClassTab">
              <div v-for="(item, index) in contactSpecValueList" :key="index">
                <span>特殊字段名:</span>
                <Input
                  type="text"
                  size="small"
                  v-model="item.key"
                  placeholder="请输入"
                  style="width: 120px"
                />
                <span class="dele_icon" style="margin-right: 5px">
                  <Icon type="md-add" @click="handleSpecValueAdd(item, 1)" />
                </span>
                <span class="dele_icon">
                  <Icon
                    type="md-remove"
                    @click="handleSpecValueDele(index, 1)"
                  />
                </span>
              </div>
            </div>
          </TabPane>
          <TabPane label="区域特殊字段" name="name2">
            <div style="display: flex; justify-content: center">
              <span
                class="dele_icon"
                @click="handleSpecValueAdd('', 2)"
                style="text-align: center; width: 50px"
                >添加
              </span>
            </div>
            <div class="addInputClassTab">
              <div v-for="(item, index) in areaSpecValueList" :key="index">
                <span>特殊字段名:</span>
                <Input
                  type="text"
                  size="small"
                  v-model="item.key"
                  placeholder="请输入"
                  style="width: 120px"
                />
                <span class="dele_icon" style="margin-right: 5px">
                  <Icon type="md-add" @click="handleSpecValueAdd(item, 2)" />
                </span>
                <span class="dele_icon">
                  <Icon
                    type="md-remove"
                    @click="handleSpecValueDele(index, 2)"
                  />
                </span>
              </div>
            </div>
          </TabPane>
          <TabPane label="产品特殊字段" name="name3">
            <div style="display: flex; justify-content: center">
              <span
                class="dele_icon"
                @click="handleSpecValueAdd('', 3)"
                style="text-align: center; width: 50px"
                >添加
              </span>
            </div>
            <div class="addInputClassTab">
              <div v-for="(item, index) in productSpecValueList" :key="index">
                <span>特殊字段名:</span>
                <Input
                  type="text"
                  size="small"
                  v-model="item.key"
                  placeholder="请输入"
                  style="width: 120px"
                />
                <span class="dele_icon" style="margin-right: 5px">
                  <Icon type="md-add" @click="handleSpecValueAdd(item, 3)" />
                </span>
                <span class="dele_icon">
                  <Icon
                    type="md-remove"
                    @click="handleSpecValueDele(index, 3)"
                  />
                </span>
              </div>
            </div>
          </TabPane>
        </Tabs>
        <!-- <Form :label-width="100">
          <FormItem label="请输入字段名:">
            <Input type="text"
                   size="small"
                   v-model="addInputName"
                   placeholder="请输入"
                   style="width: 200px" />
          </FormItem>
        </Form> -->
      </div>
      <div class="modal-footer" slot="footer">
        <Button @click="showAddInputModal = false">取消</Button>
        <Button type="primary" @click="handleAddInputConfirm">确认</Button>
      </div>
    </Modal>
    <!-- 批量下深化 -->
    <Modal v-model="processModal" title="下深化">
      <div>
        <div class="process_modal">
          <span>深化人员:</span>
          <Select v-model="process_man" style="width: 150px">
            <Option
              v-for="item in processManList"
              :key="item.id"
              :label="item.nickname"
              :value="item.id"
            ></Option>
          </Select>
        </div>
        <div class="process_modal">
          <span>选择时间:</span>
          <DatePicker
            type="date"
            v-model="process_start_time"
            placeholder="年/月/日"
            style="width: 150px"
          ></DatePicker>
          至
          <DatePicker
            type="date"
            v-model="process_end_time"
            placeholder="年/月/日"
            style="width: 150px"
          ></DatePicker>
        </div>
      </div>
      <div slot="footer">
        <Button @click="processModal = false">取消</Button>
        <Button type="primary" @click="handleProcess">确认</Button>
      </div>
    </Modal>
    <!-- 表单设置 -->
    <!-- <Modal
      v-model="showForms"
      @on-ok="postForms(1)"
      class-name="vertical-center-modal"
      style="max-height: 700px; overflow: hidden; overflow-y: auto"
      title="表单设置"
    >
      <Table
        :max-height="600"
        border
        :columns="formSetTableColumns"
        :data="post_formSetTableData"
      >
      </Table>
    </Modal> -->
  </div>
</template>

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

export default {
  name: "BidSystemContractInfo",
  components: {},
  props: {},
  // import引入的组件需要注入到对象中才能使用
  data() {
    // 这里存放数据
    return {
      showSupModal: false,
      showPDTEditModal: false,
      options: {
        disabledDate(date) {
          return date && date.valueOf() < Date.now() - 86400000;
        },
      },
      formData: {
        order_no: "",
        residential_name: "",
        client_name: "",
        address: "",
        mobile: "",
        pay_state: "",
        warning_state: "",
        salesman: "",
        remark: "",
        start_time: "",
        end_time: "",
        type: "",
        special: [],
        head: [],
        //区域列表
        list: [
          {
            areaIndex: null,
            num: "",
            title: "",
            unit: "",
            quantity: "",
            house_type: "",
            remark: "",
            order_no: "",
            product: [],
          },
        ],
      },
      tableColumns: [
        { type: "selection", align: "center", minWidth: 100 },
        { title: "序号", key: "index", align: "center", minWidth: 80 },
        {
          title: "产品名称",
          key: "title",
          align: "center",
          tooltip: true,
          minWidth: 100,
        },
        { title: "数量", key: "num", align: "center", minWidth: 80 },
        { title: "价格", key: "price", align: "center", minWidth: 80 },
        {
          title: "规格",
          key: "measure",
          align: "center",
          tooltip: true,
          minWidth: 140,
        },
        {
          title: "工艺属性",
          key: "process_property",
          align: "center",
          tooltip: true,
          minWidth: 120,
        },
        {
          title: "图纸",
          align: "center",
          key: "url",
          minWidth: 100,
          render: (h, params) => {
            const { row } = params;
            let url = row.url ? row.url : [];
            return h("img", {
              attrs: {
                src: this.$store.state.ip + url[0],
                style:
                  "max-width:50px;max-height:50px;position:relative;top:3px;",
              },
              on: {
                click: (e) => {
                  // this.axios('/api/orders_img', { params: { id: row.id, type: 1 } }).then(res => {
                  // row.imgs = res.data
                  let list = [];
                  row.url.forEach((el) => {
                    list.push({ img_url: el });
                  });
                  this.$previewImg({
                    list,
                    baseUrl: this.$store.state.ip,
                    baseImgField: "img_url",
                    baseTitleField: "",
                  });
                  // })
                },
              },
            });
          },
        },
        {
          title: "左右式",
          key: "left_right_mode",
          align: "center",
          tooltip: true,
          minWidth: 80,
          render: (h, params) => {
            return h(
              "span",
              {},
              params.row.left_right_mode == 1
                ? "左式"
                : params.row.left_right_mode == 2
                ? "右式"
                : ""
            );
          },
        },
        {
          title: "图号",
          key: "url_number",
          align: "center",
          tooltip: true,
          minWidth: 80,
        },
        { title: "备注", key: "remark", align: "center", minWidth: 80 },
        {
          title: "是否下深化",
          key: "sub_state",
          align: "center",
          minWidth: 80,
          render: (h, params) => {
            return h("span", {}, params.row.sub_state >= 1 ? "是" : "否");
          },
        },
        {
          title: "操作",
          key: "set",
          align: "center",
          minWidth: 100,
          slot: "set",
        },
      ],
      supTableColumns: [
        { title: "序号", type: "index", align: "center", minWidth: 100 },
        {
          title: "辅料名称",
          key: "title",
          align: "center",
          slot: "combine",
          minWidth: 150,
        },
        {
          title: "操作",
          key: "set",
          align: "center",
          slot: "supSet",
          minWidth: 100,
        },
      ],
      listTableColumns: [
        { type: "selection", align: "center", minWidth: 100 },
        { title: "区域编码", key: "area_num", align: "center", minWidth: 100 },
        {
          title: "区域名称",
          key: "area_title",
          align: "center",
          minWidth: 100,
        },
        { title: "单位", key: "area_unit", align: "center", minWidth: 100 },
        {
          title: "工程量",
          key: "area_quantity",
          align: "center",
          minWidth: 100,
        },
        { title: "户型", key: "house_type", align: "center", minWidth: 100 },
        { title: "备注", key: "area_remark", align: "center", minWidth: 100 },
        { title: "产品名称", key: "title", align: "center", minWidth: 100 },
        { title: "数量", key: "num", align: "center", minWidth: 100 },
        { title: "价格", key: "price", align: "center", minWidth: 100 },
        { title: "规格", key: "measure", align: "center", minWidth: 100 },
        {
          title: "工艺属性",
          key: "process_property",
          align: "center",
          minWidth: 100,
        },
        {
          title: "图纸",
          key: "url",
          align: "center",
          minWidth: 100,
          render: (h, params) => {
            const { row } = params;
            let url = row.url ? row.url : [];
            return h("img", {
              attrs: {
                src: url.length > 0 ? this.$store.state.ip + url[0] : "",
                style:
                  "max-width:50px;max-height:50px;position:relative;top:3px;",
              },
              on: {
                click: () => {
                  // this.axios('/api/orders_img', { params: { id: row.id, type: 1 } }).then(res => {
                  // row.imgs = res.data
                  let list = [];
                  row.url.forEach((el) => {
                    list.push({ img_url: el });
                  });
                  console.log("row.url :>> ", row.url);
                  this.$previewImg({
                    list,
                    baseUrl: this.$store.state.ip,
                    baseImgField: "img_url",
                    baseTitleField: "",
                  });
                  // })
                },
              },
            });
          },
        },
        {
          title: "左右式",
          key: "left_right_mode",
          align: "center",
          minWidth: 100,
        },
        { title: "图号", key: "url_number", align: "center", minWidth: 100 },
        { title: "备注", key: "remark", align: "center", minWidth: 100 },
        { title: "备注", key: "remark", align: "center", minWidth: 100 },
        {
          title: "深化状态",
          key: "sub_state",
          align: "center",
          minWidth: 100,
          render: (h, params) => {
            return h(
              "span",
              {},
              params.row.sub_state == 0
                ? "未下深化"
                : params.row.sub_state == 1
                ? "深化中"
                : "深化完成"
            );
          },
        },
        {
          title: "操作",
          key: "set",
          align: "center",
          minWidth: 100,
          slot: "set",
        },
      ],
      listTableData: [],
      supTableData: [],
      PDTTypeList: [], //产品分类列表
      PDTEditTypeList: [],
      combineList: [], //项目辅料→辅料名称列表
      salesmanList: [], //业务员列表
      //是否查看
      isChecked: false,
      PDTProcessAttrList: [],
      // 测量字段列表
      measureList: [],
      contactForm: [],
      addInputTitle: "",
      showAddInputModal: false,
      addInputName: "",
      contactSpecValueList: [],
      areaSpecValueList: [],
      productSpecValueList: [],
      warningList: [],
      currencyTab: "",
      processModal: false,
      processManList: [],
      process_man: "",
      process_start_time: "",
      process_end_time: "",
      selected: [],
      page_index: 1,
      page_size: 10,
      total: 0,
      searchData: {},
      showForms: false,
      formSetTableColumns: [
        {
          title: "是否展示",
          align: "center",
          key: "is_show",
          minWidth: 60,
          render: (h, params) => {
            const { index } = params;
            const currentRow = JSON.parse(
              JSON.stringify(this.post_formSetTableData[index])
            );
            return h("Checkbox", {
              props: {
                value: currentRow.is_show,
                disabled:
                  currentRow.key == "order_no" ||
                  currentRow.key == "residential_name" ||
                  currentRow.key == "warning_state" ||
                  currentRow.key == "start_time" ||
                  currentRow.key == "end_time" ||
                  currentRow.key == "client_name" ||
                  currentRow.key == "predict_price" ||
                  currentRow.key == "box_id" ||
                  currentRow.key == "predict_price" ||
                  currentRow.key == "order_price" ||
                  currentRow.key == "fax_price" ||
                  currentRow.key == "remark",
              },
              on: {
                "on-change": (e) => {
                  currentRow.is_show = e;
                  this.post_formSetTableData.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.post_formSetTableData[index])
            );
            return h("Input", {
              props: {
                value: currentRow.title,
                type: "text",
              },
              on: {
                "on-change": (e) => {
                  currentRow.title = e.target.value;
                  this.post_formSetTableData.splice(index, 1, currentRow);
                },
              },
            });
          },
        },
      ],
      post_formSetTableData: [],
      formSetTableData: [
        {
          is_show: true,
          key: "order_no",
          value: "订单编号",
          title: "订单编号",
        },
        {
          is_show: true,
          key: "residential_name",
          value: "项目名称",
          title: "项目名称",
        },
        {
          is_show: true,
          key: "warning_state",
          value: "紧急程度",
          title: "紧急程度",
        },
        {
          is_show: true,
          key: "front_money",
          value: "项目定金",
          title: "项目定金",
        },
        {
          is_show: true,
          key: "start_time",
          value: "开始日期",
          title: "开始日期",
        },
        {
          is_show: true,
          key: "client_name",
          value: "客户名称",
          title: "客户名称",
        },
        {
          is_show: true,
          key: "custom_detail_name",
          value: "负责人",
          title: "负责人",
        },
        {
          is_show: true,
          key: "custom_detail_mobile",
          value: "手机号",
          title: "手机号",
        },
        {
          is_show: true,
          key: "custom_detail_id",
          value: "详细地址",
          title: "详细地址",
        },
        {
          is_show: true,
          key: "service_id",
          value: "专营业务员",
          title: "专营业务员",
        },
        {
          is_show: true,
          key: "end_time",
          value: "交付日期",
          title: "交付日期",
        },
        {
          is_show: true,
          key: "predict_price",
          value: "产品总价",
          title: "产品总价",
        },
        {
          is_show: true,
          key: "order_price",
          value: "订单金额",
          title: "订单金额",
        },
        {
          is_show: true,
          key: "fax_price",
          value: "折扣金额",
          title: "折扣金额",
        },
        { is_show: true, key: "box_id", value: "包装", title: "包装" },
        { is_show: true, key: "remark", value: "订单备注", title: "订单备注" },
      ],
      area_no_list: [],
      area_title_list: [],
      product_title_list: [],
      url_number_list: [],
      is_area_deep: false,
      order_area_id: null,
    };
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    //2编辑  3详情  0新增
    this.$route.query.type == 3 ? (this.isChecked = true) : "";
    this.$route.query.order_no
      ? (this.formData.order_no = this.$route.query.order_no)
      : "";
    // 获取表单设置列表
    this.get_forms();
    // 获取工艺属性
    this.axios("/api/basics_properties_index").then((res) => {
      this.PDTProcessAttrList = res.data.data;
    });
    // 获取紧急程度
    this.axios.get("/api/warning_list").then((res) => {
      this.warningList = res.data.data;
    });
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.$route.query.type == 3 || this.$route.query.type == 2
      ? this.initData(this.$route.query.order_no)
      : "";
    //获取操作员
    this.axios("/api/user").then(
      (res) => (
        (this.salesmanList = res.data.data),
        (this.processManList = res.data.data)
      )
    );
    //获取产品分类下拉列表
    this.axios("/api/parts_product_list").then((res) => {
      this.PDTTypeList = res.data;
      this.PDTTypeList.forEach((el) => {
        el.value = el.id;
        el.label = el.title;
      });
      this.PDTEditTypeList = this.PDTTypeList;
    });
    //获取基础测量字段列表
    this.axios("/api/basics_measure_index").then((res) => {
      this.measureList = res.data.data;
    });
    // 获取项目辅料列表
    this.axios("/api/material_combination").then((res) => {
      this.combineList = res.data.data;
    });
  },
  methods: {
    get_forms() {
      this.axios
        .post("/api/update/get_table", { id: "ContractList_info" })
        .then((res) => {
          if (Array.isArray(res.data)) {
            this.post_formSetTableData = JSON.parse(
              JSON.stringify(this.formSetTableData)
            );
          } else {
            if (res.data.table.formSet && res.data.table.formSet.length > 0) {
              this.formSetTableData = JSON.parse(
                JSON.stringify(res.data.table.formSet)
              );
              this.post_formSetTableData = JSON.parse(
                JSON.stringify(res.data.table.formSet)
              );
            } else {
              this.post_formSetTableData = JSON.parse(
                JSON.stringify(this.formSetTableData)
              );
            }
          }
        });
    },
    handlechange(val) {
      console.log("val :>> ", val);
    },
    initData(order_no) {
      this.axios({
        method: "get",
        url: "/api/order_area_list",
        params: {
          order_no,
          oa_id: this.$route.query.oa_id || "",
          type: 1,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.formData = res.data;
          this.supTableData = res.data.ext;
          if (this.formData.list.length == 0) {
            this.formData.list.push({
              areaIndex: 1,
              num: "",
              title: "",
              unit: "",
              quantity: "",
              house_type: "",
              remark: "",
              order_no: "",
              special: [],
              head: [],
              product: [
                {
                  title: "",
                  num: "",
                  measure: "",
                  process_property: "",
                  special: [],
                  url: [],
                  url_number: "",
                  remark: "",
                },
              ],
            });
          }
          this.formData.start_time = this.func.replaceDateNoHMS(
            this.formData.start_time
          );
          this.formData.end_time = this.func.replaceDateNoHMS(
            this.formData.end_time
          );
          // 产品特殊字段→ 弹窗窗口，table表头
          let arr = [];
          res.data.head[3] &&
            res.data.head[3].forEach((item) => {
              // ele[key] = item.key
              arr.push({
                title: item.key,
                key: item.key,
                align: "center",
                minWidth: 80,
              });
            });
          this.tableColumns = [
            { type: "selection", align: "center", minWidth: 100 },
            { title: "序号", key: "index", align: "center", minWidth: 80 },
            {
              title: "产品名称",
              key: "title",
              align: "center",
              tooltip: true,
              minWidth: 100,
            },
            { title: "数量", key: "num", align: "center", minWidth: 80 },
            { title: "价格", key: "price", align: "center", minWidth: 80 },
            {
              title: "规格",
              key: "measure",
              align: "center",
              tooltip: true,
              minWidth: 140,
            },
            {
              title: "工艺属性",
              key: "process_property",
              align: "center",
              tooltip: true,
              minWidth: 120,
            },
            {
              title: "图纸",
              align: "center",
              key: "url",
              minWidth: 100,
              render: (h, params) => {
                const { row } = params;
                let url = row.url ? row.url : [];
                return h("img", {
                  attrs: {
                    src: this.$store.state.ip + url[0],
                    style:
                      "max-width:50px;max-height:50px;position:relative;top:3px;",
                  },
                  on: {
                    click: (e) => {
                      // this.axios('/api/orders_img', { params: { id: row.id, type: 1 } }).then(res => {
                      // row.imgs = res.data
                      let list = [];
                      row.url.forEach((el) => {
                        list.push({ img_url: el });
                      });
                      this.$previewImg({
                        list,
                        baseUrl: this.$store.state.ip,
                        baseImgField: "img_url",
                        baseTitleField: "",
                      });
                      // })
                    },
                  },
                });
              },
            },
            {
              title: "左右式",
              key: "left_right_mode",
              align: "center",
              tooltip: true,
              minWidth: 80,
              render: (h, params) => {
                return h(
                  "span",
                  {},
                  params.row.left_right_mode == 1
                    ? "左式"
                    : params.row.left_right_mode == 2
                    ? "右式"
                    : ""
                );
              },
            },
            {
              title: "图号",
              key: "url_number",
              align: "center",
              tooltip: true,
              minWidth: 80,
            },
            ...arr,
            { title: "备注", key: "remark", align: "center", minWidth: 80 },
            {
              title: "是否下深化",
              key: "sub_state",
              align: "center",
              minWidth: 80,
              render: (h, params) => {
                return h("span", {}, params.row.sub_state >= 1 ? "是" : "否");
              },
            },
            {
              title: "操作",
              key: "set",
              align: "center",
              minWidth: 100,
              slot: "set",
            },
          ];
          // 订单特殊字段
          this.formData.special &&
            this.formData.special.forEach((element) => {
              this.formData.head[1].forEach((item) => {
                if (element.head_id == item.id) {
                  element = Object.assign(element, item);
                  this.contactSpecValueList.push(element);
                }
              });
            });
          this.contactForm = this.formData.head[1] ? this.formData.head[1] : [];
          // 区域特殊字段
          this.formData.list.forEach((element, index) => {
            element.special &&
              element.special.forEach((ele) => {
                this.formData.head[2].forEach((item) => {
                  if (ele.head_id == item.id) {
                    ele = Object.assign(ele, item);
                    this.areaSpecValueList.push(ele);
                  }
                });
              });
            // if (index == 0) {
            //   element.isCurrencyArea = true;
            //   //编辑进入页面是展示第一条区域的产品
            //   element.id &&
            //     this.axios
            //       .get("/api/order_area_list_product", {
            //         params: {
            //           order_no: this.$route.query.order_no,
            //           area_id: element.id,type:1
            //         },
            //       })
            //       .then((res) => {
            //         if (res.code == 200) {
            //           if (!element.product) {
            //             element.product = [];
            //           }
            //           element.product = res.data;
            //           element.product.forEach((pdt, index) => {
            //             if (!pdt.url) {
            //               pdt.url = [];
            //             }
            //             pdt.index = index + 1;
            //             pdt.special &&
            //               pdt.special.length > 0 &&
            //               pdt.special.forEach((_pdt) => {
            //                 this.formData.head[3].forEach((element) => {
            //                   if (_pdt.head_id == element.id) {
            //                     _pdt = Object.assign(_pdt, element);
            //                     pdt[_pdt.key] = _pdt.value;
            //                     this.productSpecValueList.push(_pdt);
            //                   }
            //                 });
            //               });
            //           });
            //           this.$forceUpdate();
            //         }
            //       });
            // } else {
            //   element.isCurrencyArea = false;
            // }
          });
          this.areaSpecValueList = this.formData.head[2]
            ? this.formData.head[2]
            : [];
          this.productSpecValueList = this.formData.head[3]
            ? this.formData.head[3]
            : [];
        }
      });
    },
    //项目辅料删除
    handleSupSet(row, index) {
      this.supTableData.splice(index, 1);
      // this.supTableData.forEach((element, index) => {
      //   element.index = index + 1
      // });
    },
    goback() {
      this.$router.go(-1);
    },
    looks(img) {
      const array = [{ img_url: img }];
      this.$previewImg({
        list: array,
        baseUrl: this.$store.state.ip,
        baseImgField: "img_url",
        baseTitleField: "",
      });
    },
    delItems(n, arr) {
      arr.splice(n, 1);
    },
    changeIpt(e, row) {
      let file = e.target.files[0];
      this.postImg(file, row);
      e.target.value = null;
    },
    postImg(file, row) {
      let formData = new FormData();
      formData.append("file", file);
      this.axios.post("/api/upload_pic", formData).then((res) => {
        this.$nextTick(() => {
          row.push(res.data.url);
          this.$forceUpdate();
        });
      });
    },
    // 添加特殊字段
    handleAddInputConfirm() {
      this.formData.special = JSON.parse(
        JSON.stringify(this.contactSpecValueList)
      );
      this.formData.list.forEach((element) => {
        element.special = JSON.parse(JSON.stringify(this.areaSpecValueList));
        element.product.forEach((ele) => {
          ele.special = JSON.parse(JSON.stringify(this.productSpecValueList));
        });
      });
      let arr = [];
      this.productSpecValueList.forEach((element) => {
        arr.push({
          title: element.key,
          key: element.key,
          align: "center",
          minWidth: 80,
        });
      });
      this.tableColumns = [
        { type: "selection", align: "center", minWidth: 100 },
        { title: "序号", key: "index", align: "center", minWidth: 80 },
        {
          title: "产品名称",
          key: "title",
          align: "center",
          tooltip: true,
          minWidth: 100,
        },
        { title: "数量", key: "num", align: "center", minWidth: 80 },
        { title: "价格", key: "price", align: "center", minWidth: 80 },
        {
          title: "规格",
          key: "measure",
          align: "center",
          tooltip: true,
          minWidth: 140,
        },
        {
          title: "工艺属性",
          key: "process_property",
          align: "center",
          tooltip: true,
          minWidth: 120,
        },
        {
          title: "图纸",
          align: "center",
          key: "url",
          minWidth: 100,
          render: (h, params) => {
            const { row } = params;
            let url = row.url ? row.url : [];
            return h("img", {
              attrs: {
                src: this.$store.state.ip + url[0],
                style:
                  "max-width:50px;max-height:50px;position:relative;top:3px;",
              },
              on: {
                click: (e) => {
                  // this.axios('/api/orders_img', { params: { id: row.id, type: 1 } }).then(res => {
                  // row.imgs = res.data
                  let list = [];
                  row.url.forEach((el) => {
                    list.push({ img_url: el });
                  });
                  this.$previewImg({
                    list,
                    baseUrl: this.$store.state.ip,
                    baseImgField: "img_url",
                    baseTitleField: "",
                  });
                  // })
                },
              },
            });
          },
        },
        {
          title: "左右式",
          key: "left_right_mode",
          align: "center",
          tooltip: true,
          minWidth: 80,
          render: (h, params) => {
            return h(
              "span",
              {},
              params.row.left_right_mode == 1
                ? "左式"
                : params.row.left_right_mode == 2
                ? "右式"
                : ""
            );
          },
        },
        {
          title: "图号",
          key: "url_number",
          align: "center",
          tooltip: true,
          minWidth: 80,
        },
        ...arr,
        { title: "备注", key: "remark", align: "center", minWidth: 80 },
        {
          title: "是否下深化",
          key: "sub_state",
          align: "center",
          minWidth: 80,
          render: (h, params) => {
            return h("span", {}, params.row.sub_state >= 1 ? "是" : "否");
          },
        },
        {
          title: "操作",
          key: "set",
          align: "center",
          minWidth: 100,
          slot: "set",
        },
      ];
      this.showAddInputModal = false;
    },
    // 添加特殊字段
    handleSpecValueAdd(item, type) {
      switch (type) {
        case 1:
          this.contactSpecValueList.push({ key: "", value: "" });
          break;
        case 2:
          this.areaSpecValueList.push({ key: "", value: "" });
          break;
        case 3:
          this.productSpecValueList.push({ key: "", value: "" });
          break;
      }
    },
    // 删除特殊字段
    handleSpecValueDele(index, type) {
      switch (type) {
        case 1:
          this.contactSpecValueList.splice(index, 1);
          break;
        case 2:
          this.areaSpecValueList.splice(index, 1);
          break;
        case 3:
          this.productSpecValueList.splice(index, 1);
          break;
      }
    },
    getListData() {
      this.axios
        .get("/api/order_area_detail_list?", {
          params: {
            order_no: this.$route.query.order_no,
            oa_id: this.$route.query.oa_id || "",
            ...this.searchData,
            type: 1,
          },
        })
        .then((res) => {
          console.log(res)
          this.listTableData = res.data.data;
          this.area_no_list = res.data.area_no;
          this.area_title_list = res.data.area_title;
          this.product_title_list = res.data.product_title;
          this.url_number_list = res.data.url_number;
          this.listTableData.map((item) => {
            !item.url && (item.url = []);
            res.data.imgs.map((element) => {
              if (item.sign_id == element.sign_id) {
                item.url.push({ img_url: element.img_url });
              }
            });
          });
          this.total = res.data.total;
          this.$forceUpdate();
        });
    },
    handleCurTabChange(name) {
      this.currencyTab = name;
      if (name == "name2" && this.listTableData.length < 1) {
        this.getListData();
      }
    },
    handleSelection(selection) {
      this.selected = selection;
    },
    handleOpenModal(order_area_id) {
      if (typeof order_area_id == "number") {
        this.is_area_deep = true;
        this.order_area_id = order_area_id;
        this.processModal = true;
      } else {
        this.is_area_deep = false;
        this.order_area_id = null;
        if (this.selected.length < 1) {
          this.$Message.warning("请选择数据");
        } else {
          this.processModal = true;
        }
      }
    },
    handleRowDeep(row) {
      (this.selected = [row]), (this.processModal = true);
    },
    handleProcess() {
      if (this.process_man) {
        if (this.is_area_deep) {
          this.axios
            .get("/api/order_area_deep_pull", {
              params: {
                order_no: this.order_no,
                type: 1,
                sub_state: 1,
                order_area_id: this.order_area_id,
                process_man: this.process_man,
                process_start_time: this.process_start_time
                  ? this.func.replaceDateNoHMS(this.process_start_time)
                  : "",
                process_end_time: this.process_end_time
                  ? this.func.replaceDateNoHMS(this.process_end_time)
                  : "",
              },
            })
            .then((res) => {
              if (res.code == 200) {
                this.$Message.success(res.msg);
                this.processModal = false;
                this.getListData();
                this.initData(this.$route.query.order_no);
              }
            });
        } else {
          let flag = true;
          this.selected.map((item) => {
            if (item.sub_state > 1) {
              flag = false;
            }
          });
          if (!flag) {
            this.$Message.warning("选择数据中存在已下深化产品，请重新选择");
          } else {
            const order_area_product_id = this.selected.map(
              (item) => item.order_area_product_id || item.id
            );
            this.axios({
              method: "get",
              url: "/api/order_area_detail_pull",
              params: {
                order_no: this.order_no,
                type: 1,
                sub_state: 1,
                order_area_product_id,
                process_man: this.process_man,
                process_start_time: this.process_start_time
                  ? this.func.replaceDateNoHMS(this.process_start_time)
                  : "",
                process_end_time: this.process_end_time
                  ? this.func.replaceDateNoHMS(this.process_end_time)
                  : "",
              },
            }).then((res) => {
              if (res.code == 200) {
                this.$Message.success(res.msg);
                this.selected = [];
                this.processModal = false;
                this.getListData();
                this.initData(this.$route.query.order_no);
              }
            });
          }
        }
      } else {
        this.$Message.warning("请选择人员");
      }
    },
    changePage(e) {
      this.page_index = e;
      this.getListData();
    },
    changeSize(e) {
      this.page_size = e;
      this.getListData();
    },
    handleHiddenCurrencyArea(item, index) {
      item.isCurrencyArea = false;
      this.$forceUpdate();
    },
    // 展示区域产品
    handleShowCurrencyArea(item, index) {
      const preObj = this.formData.list.filter((item) => item.isCurrencyArea);
      if (preObj.length > 0) {
        // 1.1移除上一个展开区域及产品
        this.formData.list.forEach((element) => {
          element.product = [];
          if (element.id == preObj[0].id) {
            element.isCurrencyArea = false;
          }
        });
        // 2.获取当前展开区域及产品
        item.isCurrencyArea = true;
        this.axios
          .get("/api/order_area_list_product", {
            params: {
              order_no: this.$route.query.order_no,
              oa_id: this.$route.query.oa_id || "",
              area_id: item.id,
              type: 1,
            },
          })
          .then((res) => {
            if (res.code == 200) {
              if (!item.product) {
                item.product = [];
              }
              item.product = res.data;
              let flag = true;
              item.product.forEach((pdt, index) => {
                pdt.index = index + 1;
                pdt.special &&
                  pdt.special.length > 0 &&
                  pdt.special.forEach((element) => {
                    this.formData.head[3].forEach((item) => {
                      if (element.head_id == item.id) {
                        element = Object.assign(element, item);
                        pdt[element.key] = element.value;
                        this.productSpecValueList.push(element);
                      }
                    });
                  });
                // 是否已全部下深化
                if (pdt.sub_state != 1) {
                  flag = false;
                }
              });
              item.isAllDeeped = flag;
              this.$forceUpdate();
            }
          });
      } else {
        // 2.获取当前展开区域及产品
        item.isCurrencyArea = true;
        this.axios
          .get("/api/order_area_list_product", {
            params: {
              order_no: this.$route.query.order_no,
              oa_id: this.$route.query.oa_id || "",
              area_id: item.id,
              type: 1,
            },
          })
          .then((res) => {
            if (res.code == 200) {
              if (!item.product) {
                item.product = [];
              }
              item.product = res.data;
              let flag = true;
              item.product.forEach((pdt, index) => {
                pdt.index = index + 1;
                pdt.special &&
                  pdt.special.length > 0 &&
                  pdt.special.forEach((element) => {
                    this.formData.head[3].forEach((item) => {
                      if (element.head_id == item.id) {
                        element = Object.assign(element, item);
                        pdt[element.key] = element.value;
                        this.productSpecValueList.push(element);
                      }
                    });
                  });
                // 是否已全部下深化
                if (pdt.sub_state != 1) {
                  flag = false;
                }
              });
              item.isAllDeeped = flag;
              this.$forceUpdate();
            }
          });
      }
    },
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="scss" scoped>
.BidSystemContractInfo {
  overflow: hidden;
  overflow-y: auto;
  position: relative;
  top: 20px;
  height: 85%;
  padding-bottom: 20px;
}
.footer-center {
  display: flex;
  justify-content: center;
  padding: 10px 0;
}
.top_search {
  padding: 20px 0;
  width: 100%;
  .top_search_form {
    // width: 800px;
    // display: flex;
    // justify-content: space-around;
    /deep/ .ivu-form-item {
      display: inline-block;
      width: 300px;
    }
  }
}
.addArea {
  position: relative;
  padding: 15px;
  margin: 5px;
  margin-bottom: 30px;
  border-radius: 5px;
  box-shadow: 1px 1px 5px 1px #999;
  .addAreaBtn {
    position: absolute;
    right: 20px;
    top: 20px;
  }
  /deep/ .ivu-form-item {
    display: inline-block;
    width: 220px;
  }
}
.addPDTFormModal {
  .addPDTForm {
    width: 100%;
    position: relative;
    border-bottom: 1px solid #e8eaec;
    margin-bottom: 30px;
    /deep/ .ivu-form-item {
      display: inline-block;
      width: 300px;
    }
    .addPDTBtn {
      position: absolute;
      right: 10px;
      bottom: 25px;
    }
  }
  /deep/ .ivu-modal-body {
    // display: flex;
    // justify-content: center;
    // flex-wrap: wrap;
    max-height: 700px;
    overflow: hidden;
    overflow-y: auto;
  }
}
.addPDTProcess {
  width: 300px;
  padding-bottom: 15px;
  div {
    display: flex;
    justify-content: space-around;
    padding: 5px 0;
    span {
      padding-top: 6px;
    }
  }
  .dele_icon {
    width: 10px;
    /deep/ .ivu-icon {
      padding-top: 5px;
    }
  }
}
.product-img {
  padding-top: 10px;
}
.product-add {
  display: flex;
  flex-wrap: wrap;
  .ipt {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    outline: none;
    top: 0;
    left: 0;
  }
  .add-items {
    width: 40px;
    height: 40px;
    border: 1px dotted #e7e7e7;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    flex-direction: column;
    background: #f4f5f7;
    .item {
      width: 46px;
      height: 46px;
      background: #3764ff;
      opacity: 0.6;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      color: #fff;
    }
  }
  .items {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #e7e7e7;
    margin-right: 10px;
    border-radius: 5px;
    position: relative;
    img {
      max-width: 40px;
      max-height: 40px;
    }
  }
}
.supModalBtn {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
/deep/.ivu-modal-body {
  // display: flex;
  // justify-content: center;
  .addInputClass {
    display: flex;
    justify-content: center;
    width: 500px;
    .dele_icon {
      cursor: pointer;
      width: 10px;
      /deep/ .ivu-icon {
        padding-top: 5px;
      }
    }
  }
}
.addInputClassTab {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 5px;
    .dele_icon {
      i {
        font-size: 20px;
      }
    }
  }
}
/deep/.ivu-tabs-nav-scroll {
  display: flex;
  justify-content: center;
}
/deep/ .ivu-table-wrapper {
  overflow: visible;
}
/deep/.ivu-table-fixed-body {
  padding-bottom: 20px;
}
.process_modal {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}
</style>