BST_bigScreen/src/views/BidSystem/ContractList/edit.vue

<template>
  <div class="BidSystemContractEdit">
    <Toptitle
      :title="
        $route.query.type == 1
          ? '新增工装订单'
          : $route.query.type == 2
          ? '编辑工装订单'
          : '查看工装订单'
      "
    >
      <slot name="titleButton">
        <Button
          type="primary"
          style="margin-right: 10px"
          :disabled="isChecked"
          @click="showAddInputModal = true"
        >
          添加特殊字段
        </Button>
        <Button
          @click="showSupModal = true"
          type="primary"
          style="margin-right: 10px"
          >项目辅料</Button
        >
        <Button
          @click="goback()"
          type="primary"
          ghost
          style="margin-right: 10px"
          >返回</Button
        >
        <Button
          @click="postData()"
          type="primary"
          :disabled="isChecked"
          ghost
          style="margin-right: 10px"
          >保存</Button
        >
      </slot>
    </Toptitle>
    <div class="top_search">
      <Form :model="formData" :label-width="100" class="top_search_form">
        <FormItem label="订单号:">
          <Input
            type="text"
            size="small"
            disabled
            v-model="formData.order_no"
            placeholder="自动生成"
            style="width: 200px"
          />
        </FormItem>
        <FormItem label="项目名称:">
          <Input
            type="text"
            :disabled="isChecked"
            size="small"
            v-model="formData.residential_name"
            placeholder="请输入项目名称"
            style="width: 200px"
          />
        </FormItem>
        <FormItem label="客户名称:">
          <Select
            clearable
            filterable
            size="small"
            :disabled="isChecked"
            class="auto-width"
            @on-change="handleClientChange"
            v-model="formData.custom_id"
          >
            <Option
              v-for="item in clientList"
              :label="item.title"
              :key="item.id"
              :value="item.id"
            ></Option>
          </Select>
        </FormItem>
        <FormItem label="紧急程度:">
          <Select
            v-model="formData.warning_state"
            :disabled="isChecked"
            size="small"
            style="width: 200px"
          >
            <Option
              v-for="_item in warningList"
              :key="_item.id"
              :value="_item.id"
              :label="_item.title"
            ></Option>
          </Select>
        </FormItem>
        <FormItem label="项目定金:">
          <Input
            type="text"
            size="small"
            :disabled="isChecked"
            v-model="formData.front_money"
            placeholder="请输入项目定金"
            style="width: 200px"
          />
          <!-- <RadioGroup v-model="formData.pay_state"
                      size="small">
            <Radio :label=0
                   :disabled="isChecked">未收款</Radio>
            <Radio :label=1
                   :disabled="isChecked">已收款</Radio>
          </RadioGroup> -->
        </FormItem>
        <FormItem label="详细地址:">
          <Select
            clearable
            filterable
            size="small"
            :disabled="isChecked"
            class="auto-width"
            @on-change="handleClientDetailChange"
            v-model="formData.custom_detail_id"
          >
            <Option
              v-for="item in clientDetailList"
              :label="item.address"
              :key="item.id"
              :value="item.id"
            ></Option>
          </Select>
        </FormItem>
        <FormItem label="手机号:">
          <Select
            clearable
            filterable
            size="small"
            :disabled="isChecked"
            class="auto-width"
            @on-change="handleClientDetailChange"
            v-model="formData.custom_detail_id"
          >
            <Option
              v-for="item in clientDetailList"
              :label="item.mobile"
              :key="item.id"
              :value="item.id"
            ></Option>
          </Select>
        </FormItem>
        <FormItem label="开始日期:">
          <DatePicker
            type="date"
            size="small"
            :disabled="isChecked"
            :options="options"
            @on-change="handleStartTimeChange"
            v-model="formData.start_time"
            placeholder=" 年/月/日"
            style="width: 200px"
          ></DatePicker>
        </FormItem>
        <FormItem label="结束日期:">
          <DatePicker
            type="date"
            size="small"
            :disabled="isChecked"
            :options="options"
            @on-change="handleEndTimeChange"
            v-model="formData.end_time"
            placeholder=" 年/月/日"
            style="width: 200px"
          ></DatePicker>
        </FormItem>
        <FormItem label="业务员:">
          <Select
            v-model="formData.salesman"
            filterable
            :disabled="isChecked"
            clearable
            style="width: 200px"
            size="small"
          >
            <Option
              v-for="item in salesmanList"
              :value="item.id"
              :key="item.id"
              >{{ item.nickname }}</Option
            >
          </Select>
        </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 + ':'"
        >
          <Input
            type="text"
            size="small"
            :disabled="isChecked"
            v-model="item.value"
            placeholder="请输入"
            style="width: 200px"
          />
        </FormItem>
        <FormItem label="备注:">
          <Input
            type="textarea"
            :disabled="isChecked"
            size="small"
            v-model="formData.remark"
            placeholder=""
            style="width: 200px"
          />
        </FormItem>
      </Form>
    </div>
    <div
      class="addArea"
      v-for="(areaItem, areaIndex) in formData.list"
      :key="areaItem.areaIndex"
    >
      <div class="addAreaBtn">
        <Button
          @click="handleAreaAdd(formData.list, areaIndex)"
          :disabled="isChecked"
          type="primary"
          style="margin-right: 10px"
          >新增区域</Button
        >
        <Button
          @click="handleAreaDele(areaIndex)"
          type="error"
          v-show="areaIndex != 0"
          :disabled="isChecked"
          style="margin-right: 10px"
          >删除区域</Button
        >
        <Button
          @click="handleAreaAddPDT(areaItem, areaIndex)"
          :disabled="isChecked"
          type="primary"
          >新增产品</Button
        >
      </div>
      <div class="addAreaForm">
        <Form :label-width="100" :model="areaItem" style="width: 60%">
          <FormItem label="区域编码:">
            <Input
              type="text"
              size="small"
              :disabled="isChecked"
              v-model="areaItem.num"
              placeholder="请输入区域编码"
              style="width: 120px"
            />
          </FormItem>
          <FormItem label="区域名称:">
            <Input
              type="text"
              size="small"
              :disabled="isChecked"
              v-model="areaItem.title"
              placeholder="请输入区域名称"
              style="width: 120px"
            />
          </FormItem>
          <FormItem label="单位:">
            <Input
              type="text"
              size="small"
              :disabled="isChecked"
              v-model="areaItem.unit"
              placeholder="请输入单位"
              style="width: 120px"
            />
          </FormItem>
          <FormItem label="工程量:">
            <Input
              type="text"
              size="small"
              v-model="areaItem.quantity"
              :disabled="isChecked"
              placeholder="请输入工程量"
              style="width: 120px"
            />
          </FormItem>
          <FormItem label="户型:">
            <Input
              type="text"
              size="small"
              :disabled="isChecked"
              v-model="areaItem.house_type"
              placeholder="请输入户型"
              style="width: 120px"
            />
          </FormItem>
          <FormItem
            v-for="item in areaItem.special"
            :key="item.id"
            :label="item.key + ':'"
          >
            <Input
              type="text"
              size="small"
              :disabled="isChecked"
              v-model="item.value"
              placeholder="请输入"
              style="width: 120px"
            />
          </FormItem>
          <FormItem label="备注:">
            <Input
              type="text"
              :disabled="isChecked"
              size="small"
              v-model="areaItem.remark"
              placeholder="请输入备注"
              style="width: 120px"
            />
          </FormItem>
        </Form>
      </div>
      <div class="addAreaTable">
        <Table
          :columns="tableColumns"
          :data="areaItem.product"
          max-height="600"
          border
        >
          <template slot="Set" slot-scope="{ row, index }">
            <a
              style="margin: 0 5px"
              v-show="$route.query.type != 3"
              @click="handleSet(row, index, 3, areaItem.product, areaIndex)"
              >编辑</a
            >
            <a
              style="margin: 0 5px; color: red"
              v-show="$route.query.type != 3"
              @click="handleSet(row, index, 4, areaItem.product)"
              >删除</a
            >
          </template>
        </Table>
      </div>
    </div>
    <li v-show="false" v-for="item in formData.list" :key="item.id"></li>
    <!-- 项目辅料弹窗 -->
    <Modal title="项目辅料" v-model="showSupModal" :width="400">
      <div>
        <div class="supModalBtn">
          <Button @click="handleAddSup" type="primary">新增</Button>
        </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>
          </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="showPDTModal"
      :mask-closable="false"
      class="addPDTFormModal"
      :width="1000"
    >
      <div
        class="addPDTForm"
        v-for="(tempItem, tempIndex) in tempPDTList"
        :key="tempItem.id"
      >
        <Form :label-width="100" :model="tempItem">
          <FormItem label="产品名称:">
            <Input
              type="text"
              size="small"
              placeholder="请输入"
              v-model="tempItem.title"
              style="width: 120px"
            />
          </FormItem>
          <FormItem label="数量">
            <Input
              type="text"
              size="small"
              v-model="tempItem.num"
              placeholder="请输入"
              style="width: 120px"
            />
          </FormItem>
          <FormItem label="图号:">
            <Input
              type="text"
              size="small"
              placeholder="请输入"
              v-model="tempItem.url_number"
              style="width: 120px"
            />
          </FormItem>
          <FormItem label="图纸">
            <div class="product-img">
              <div class="product-add">
                <div
                  class="items"
                  v-for="(_item, _index) of tempItem.url"
                  :key="_index"
                >
                  <img
                    @click="looks(_item)"
                    :src="$store.state.ip + _item"
                    alt=""
                  />
                  <Icon
                    size="20"
                    @click="delItems(_index, tempItem.url)"
                    class="delete-img"
                    type="ios-close-circle"
                  />
                </div>

                <div class="add-items">
                  <div class="_item">
                    <Icon size="50" type="ios-add" />
                  </div>
                  <input
                    @change="changeIpt($event, tempItem.url)"
                    type="file"
                    class="ipt"
                  />
                </div>
              </div>
            </div>
          </FormItem>
          <FormItem label="产品分类">
            <Select
              v-model="tempItem.type_id"
              placeholder="请选择"
              style="width: 120px"
              @on-change="(e) => hanndleAddPDTTypeChange(tempItem, e)"
              size="small"
            >
              <Option
                v-for="item in PDTTypeList"
                :value="item.value"
                :key="item.value"
                >{{ item.label }}</Option
              >
            </Select>
          </FormItem>
          <div
            style="display: contents"
            v-for="el in tempItem.tempPDTTypeList"
            :key="el"
          >
            <FormItem
              :label="_item.title"
              v-for="_item in tempItem.tempMeasureList"
              v-show="el == _item.id"
              :key="_item.id"
            >
              <Input
                type="text"
                size="small"
                v-model="tempItem[_item.e_title]"
                placeholder="请输入"
                style="width: 120px"
              />
            </FormItem>
          </div>
          <FormItem label="价格:">
            <Input
              type="text"
              size="small"
              v-model="tempItem.price"
              placeholder="请输入备注"
              style="width: 120px"
            />
          </FormItem>
          <FormItem
            :label="item.key + ':'"
            v-for="item in productSpecValueList"
            :key="item.id"
          >
            <Input
              type="text"
              size="small"
              v-model="tempItem[item.key]"
              placeholder="请输入"
              style="width: 120px"
            />
          </FormItem>
          <FormItem label="备注:">
            <Input
              type="text"
              size="small"
              v-model="tempItem.remark"
              placeholder="请输入备注"
              style="width: 120px"
            />
          </FormItem>
          <FormItem label="工艺属性">
            <Button
              @click="handleProcessAdd(tempItem, tempIndex)"
              size="small"
              type="text"
              style="color: #57a3f3"
              >添加属性</Button
            >
          </FormItem>
        </Form>
        <div class="addPDTProcess">
          <div
            v-for="(_item, _index) in tempItem.addPDTProcessAttrList"
            :key="_item.id"
          >
            <span>属性{{ _index + 1 }}</span>
            <Select
              :value="_item.id"
              size="small"
              @on-change="
                (value) => handleAddPDTAttrChange(_item, _index, value)
              "
              style="width: 80px"
            >
              <Option
                v-for="__item in PDTProcessAttrList"
                :key="__item.id"
                :value="__item.id"
                :label="__item.title"
              >
              </Option>
            </Select>
            <Select
              :value="_item.process_detail"
              filterable
              clearable
              label-in-value
              @on-change="
                (value) => handleAddPDTAttrDetailChange(_item, _index, value)
              "
              size="small"
              style="width: 80px"
            >
              <Option
                v-for="__item in _item.PDTProcessAttrDetailList"
                :key="__item.id"
                :value="__item.id"
                :label="__item.title"
              />
            </Select>
            <div class="dele_icon">
              <!-- v-show="tempItem.addPDTProcessAttrList.length!=1" -->
              <Icon
                type="ios-trash"
                @click="
                  handleAddPDTDetailDele(tempItem.addPDTProcessAttrList, _index)
                "
              />
            </div>
          </div>
        </div>
        <div class="addPDTBtn">
          <Button
            type="primary"
            style="margin-right: 10px"
            @click="handleAddPDTCopy(tempItem, tempIndex)"
            >复制</Button
          >
          <Button
            type="primary"
            style="margin-right: 10px"
            @click="handleAddPDTAdd(tempIndex)"
            >添加</Button
          >
          <Button
            type="error"
            v-show="tempIndex != 0"
            style="margin-right: 10px"
            @click="handleAddPDTDele(tempIndex)"
            >删除</Button
          >
        </div>
      </div>
      <div class="modal-footer" slot="footer">
        <Button @click="showPDTModal = false">取消</Button>
        <Button type="primary" @click="handleAddPDTConfirm">确认</Button>
      </div>
    </Modal>
    <!-- 编辑产品弹窗 -->
    <Modal
      title="编辑产品"
      v-model="showPDTEditModal"
      :mask-closable="false"
      class="addPDTFormModal"
      :width="1000"
    >
      <div class="addPDTForm">
        <Form :label-width="100" :model="PDTEdit">
          <FormItem label="产品名称:">
            <Input
              type="text"
              size="small"
              placeholder="请输入"
              v-model="PDTEdit.title"
              style="width: 120px"
            />
          </FormItem>
          <FormItem label="数量">
            <Input
              type="text"
              size="small"
              v-model="PDTEdit.num"
              placeholder="请输入"
              style="width: 120px"
            />
          </FormItem>
          <FormItem label="图号:">
            <Input
              type="text"
              size="small"
              placeholder="请输入"
              v-model="PDTEdit.url_number"
              style="width: 120px"
            />
          </FormItem>
          <FormItem label="图纸">
            <div class="product-img">
              <div class="product-add">
                <div
                  class="items"
                  v-for="(_item, _index) of PDTEdit.url"
                  :key="_index"
                >
                  <img
                    @click="looks(_item)"
                    :src="$store.state.ip + _item"
                    alt=""
                  />
                  <Icon
                    size="20"
                    @click="delItems(_index, PDTEdit.url)"
                    class="delete-img"
                    type="ios-close-circle"
                  />
                </div>

                <div class="add-items">
                  <div class="_item">
                    <Icon size="50" type="ios-add" />
                  </div>
                  <input
                    @change="changeIpt($event, PDTEdit.url)"
                    type="file"
                    class="ipt"
                  />
                </div>
              </div>
            </div>
          </FormItem>
          <FormItem label="产品分类">
            <Select
              v-model="PDTEdit.type_id"
              placeholder="请选择"
              style="width: 120px"
              @on-change="(e) => hanndleAddPDTTypeChange(PDTEdit, e)"
              size="small"
            >
              <Option
                v-for="item in PDTEditTypeList"
                :value="item.value"
                :key="item.value"
                >{{ item.label }}</Option
              >
            </Select>
          </FormItem>
          <div style="display: contents">
            <!-- <FormItem :label="_item.title"
                      v-for="(_item) in PDTEdit.measures"
                      :key="_item.id">
              <Input type="text"
                     size="small"
                     v-model="PDTEdit[_item.e_title]"
                     placeholder="请输入"
                     style="width: 120px" />
            </FormItem> -->
          </div>
          <div style="display: contents">
            <FormItem
              :label="_item.title"
              v-for="_item in PDTEdit.tempMeasureList"
              :key="_item.id"
            >
              <Input
                type="text"
                size="small"
                v-model="PDTEdit[_item.e_title]"
                placeholder="请输入"
                style="width: 120px"
              />
            </FormItem>
          </div>
          <FormItem label="价格:">
            <Input
              type="text"
              size="small"
              v-model="PDTEdit.price"
              placeholder="请输入备注"
              style="width: 120px"
            />
          </FormItem>
          <FormItem
            :label="item.key + ':'"
            v-for="item in productSpecValueList"
            :key="item.id"
          >
            <Input
              type="text"
              size="small"
              v-model="PDTEdit[item.key]"
              placeholder="请输入"
              style="width: 120px"
            />
          </FormItem>
          <FormItem label="备注:">
            <Input
              type="text"
              size="small"
              v-model="PDTEdit.remark"
              placeholder="请输入备注"
              style="width: 120px"
            />
          </FormItem>
          <FormItem label="工艺属性">
            <Button
              @click="handleEditProcessAdd()"
              size="small"
              type="text"
              style="color: #57a3f3"
              >添加属性</Button
            >
          </FormItem>
        </Form>
        <div class="addPDTProcess">
          <div
            v-for="(_item, _index) in PDTEdit.addPDTProcessAttrList"
            :key="_item.id"
          >
            <span>属性{{ _index + 1 }}</span>
            <Select
              :value="_item.id"
              size="small"
              @on-change="
                (value) => handleAddPDTAttrChange(_item, _index, value)
              "
              style="width: 80px"
            >
              <Option
                v-for="__item in PDTProcessAttrList"
                :key="__item.id"
                :value="__item.id"
                :label="__item.title"
              >
              </Option>
            </Select>
            <Select
              :value="_item.process_detail"
              filterable
              clearable
              label-in-value
              @on-change="
                (value) => handleAddPDTAttrDetailChange(_item, _index, value)
              "
              size="small"
              style="width: 80px"
            >
              <Option
                v-for="__item in _item.PDTProcessAttrDetailList"
                :key="__item.id"
                :value="__item.id"
                :label="__item.title"
              />
            </Select>
            <div class="dele_icon">
              <!-- v-show="PDTEdit.addPDTProcessAttrList.length!=1" -->
              <Icon
                type="ios-trash"
                @click="
                  handleAddPDTDetailDele(PDTEdit.addPDTProcessAttrList, _index)
                "
              />
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer" slot="footer">
        <Button @click="showPDTEditModal = false">取消</Button>
        <Button type="primary" @click="handlePDTEditConfirm">确认</Button>
      </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>
  </div>
</template>

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

export default {
  name: "BidSystemContractEdit",
  components: {},
  props: {},
  // import引入的组件需要注入到对象中才能使用
  data() {
    // 这里存放数据
    return {
      showSupModal: false,
      showPDTModal: 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: [
        { 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: "url_number",
          align: "center",
          tooltip: true,
          minWidth: 80,
        },
        { title: "备注", key: "remark", align: "center", minWidth: 80 },
        {
          title: "操作",
          key: "remark",
          align: "center",
          slot: "Set",
          minWidth: 120,
        },
      ],
      supTableColumns: [
        { title: "序号", type: "index", align: "center" },
        {
          title: "辅料名称",
          key: "title",
          align: "center",
          slot: "combine",
          minWidth: 60,
        },
        { title: "操作", key: "set", align: "center", slot: "supSet" },
      ],
      supTableData: [], //产品分类列表
      PDTTypeList: [], //项目辅料→辅料名称列表
      PDTEditTypeList: [], //项目辅料→辅料名称列表
      combineList: [], //业务员列表
      salesmanList: [],
      tempPDTIndex: "", // 新增产品暂存
      tempPDTList: [
        {
          url: [],
          process_property: "",
          process_properties: [],
          tempPDTTypeList: [],
          measure: "",
          //新增产品工艺属性列表
          addPDTProcessAttrList: [
            {
              showValue: "",
              showId: "",
              PDTProcessAttrDetailList: [],
            },
          ],
        },
      ],
      PDTEdit: {
        url: [],
        process_property: "",
        process_properties: [],
        tempPDTTypeList: [],
        measure: "",
        //新增产品工艺属性列表
        addPDTProcessAttrList: [
          {
            showValue: "",
            showId: "",
            PDTProcessAttrDetailList: [],
          },
        ],
      },
      //是否查看
      isChecked: false,
      PDTProcessAttrList: [],
      // 测量字段列表
      measureList: [],
      contactForm: [],
      addInputTitle: "",
      showAddInputModal: false,
      addInputName: "",
      contactSpecValueList: [],
      areaSpecValueList: [],
      productSpecValueList: [],
      warningList: [],
      clientList: [],
      clientDetailList: [],
    };
  },
  // 生命周期 - 创建完成（可以访问当前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.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;
    });
    // 获取客户列表
    this.axios.get("/api/custom_list").then((res) => {
      this.clientList = 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.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: {
    handlechange(val) {
      console.log("val :>> ", val);
    },
    handleStartTimeChange(value) {
      this.formData.start_time = value;
    },
    handleEndTimeChange(value) {
      this.formData.end_time = value;
    },
    initData(order_no) {
      this.axios({
        method: "get",
        url: "/api/order_area_list",
        params: {
          order_no,
        },
      })
        .then((res) => {
          this.formData = res.data;
          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
          );
          this.formData.list.forEach((element) => {});
          // 产品特殊字段→ 弹窗窗口，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 = [
            { 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: "url_number",
              align: "center",
              tooltip: true,
              minWidth: 80,
            },
            ...arr,
            { title: "备注", key: "remark", align: "center", minWidth: 80 },
            {
              title: "操作",
              key: "remark",
              align: "center",
              slot: "Set",
              minWidth: 120,
            },
          ];
          // 订单特殊字段
          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]
            : [{ key: "", value: "" }];
          // 区域特殊字段
          this.formData.list.forEach((element) => {
            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);
                  }
                });
              });
          });
          this.areaSpecValueList = this.formData.head[2]
            ? this.formData.head[2]
            : [{ key: "", value: "" }];
          // 产品特殊字段→ 弹窗窗口，table表头
          this.formData.list.forEach((area) => {
            area.product.forEach((pdt, index) => {
              pdt.index = index + 1;
              pdt.special &&
                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);
                    }
                  });
                });
            });
          });
          this.productSpecValueList = this.formData.head[3]
            ? this.formData.head[3]
            : [{ key: "", value: "" }];
        })
        .catch((err) => {});
    },
    postData() {
      //1新增 2编辑
      let ip;
      this.$route.query.type == 1
        ? (ip = "order_area_add")
        : (ip = "order_area_edit");
      this.axios({
        method: "post",
        url: "/api/" + ip,
        data: {
          ...this.formData,
          supTableData: this.supTableData,
        },
      })
        .then((res) => {
          this.$Message.success(res.msg);
          // this.initData(this.$route.query.order_no)
          this.goback();
        })
        .catch((err) => {});
    },
    // 操作table数据 3编辑 4删除
    handleSet(row, index, type, table, areaIndex) {
      switch (type) {
        case 3:
          this.PDTEdit = row;
          console.log("this.PDTEdit :>> ", this.PDTEdit);
          if (!this.PDTEdit.url) {
            this.PDTEdit.url = [];
          }
          this.PDTEditAreaIndex = areaIndex;
          this.PDTEditIndex = index;
          this.PDTEdit.addPDTProcessAttrList
            ? this.PDTEdit.addPDTProcessAttrList.forEach((element) => {
                element.type_id ? (element.id = element.type_id) : "";
                element.process_detail = element.showId * 1;
              })
            : (this.PDTEdit.addPDTProcessAttrList = []);
          this.PDTEdit.tempPDTTypeList = [];
          // if (this.PDTEdit.measures.length > 0) {
          //   this.PDTEdit.measures.forEach(el => {
          //     this.PDTEdit[el.e_title] = el.value
          //   });
          // }
          this.$route.query.type == 2 &&
            (this.PDTEdit.tempMeasureList = this.PDTEdit.measures);
          // console.log('this.PDTEdit.measures :>> ', this.PDTEdit.measures);
          // for (const key in this.PDTEdit.measures) {
          //   this.PDTEdit.tempMeasureList.forEach(el => {
          //     // console.log('el.e_title :>> ', el.e_title);
          //     this.PDTEdit[el.e_title] = el.value
          //       console.log('key :>> ', key);
          //     if (key == el.e_title) {
          //       if (this.PDTEdit[key] == '') {
          //         this.PDTEdit.tempMeasureList.splice(this.PDTEdit.tempMeasureList.indexOf(el), 1)
          //       }
          //     }
          //   });
          // }
          console.log(
            "this.PDTEdit.tempMeasureList :>> ",
            this.PDTEdit.tempMeasureList
          );
          //获取属性
          let newmeasureList = row.measure.split("*");
          for (let i in newmeasureList) {
            for (let j in this.measureList) {
              if (
                newmeasureList[i].indexOf(this.measureList[j].e_title) != -1
              ) {
                this.PDTEdit[this.measureList[j].e_title] =
                  newmeasureList[i].substring(1);
              }
            }
          }
          // this.axios('/api/basics_product_index', { params: { type_id: this.PDTEdit.type_id } }).then(res => {
          //   this.PDTEdit.tempMeasureList = res.data.data;
          // })
          // this.hanndleAddPDTTypeChange(this.PDTEdit,this.PDTEdit.type_id)
          this.PDTEdit = JSON.parse(JSON.stringify(this.PDTEdit));
          this.showPDTEditModal = true;
          break;
        case 4:
          table.splice(index, 1);
          break;
      }
    },
    //新增产品复制
    handleAddPDTCopy(item, index) {
      const temp = JSON.parse(JSON.stringify(item));
      this.tempPDTList.splice(index + 1, 0, temp);
    },
    //新增产品添加
    handleAddPDTAdd(index) {
      this.tempPDTList.splice(index + 1, 0, { addPDTProcessAttrList: [] });
    },
    //新增产品删除
    handleAddPDTDele(index) {
      this.tempPDTList.splice(index, 1);
    },
    //新增产品→新增区域确认
    handleAddPDTConfirm() {
      this.tempPDTList.forEach((element) => {
        element.addPDTProcessAttrList.forEach((el) => {
          element.process_property += el.showValue + ",";
          element.process_properties += el.showId + ",";
        });
        element.process_property = element.process_property.substring(
          0,
          element.process_property.length - 1
        );
        element.process_properties = element.process_properties.substring(
          0,
          element.process_properties.length - 1
        );

        element.tempMeasureList.forEach((el) => {
          element[el.e_title] &&
            (element.measure += `${el.e_title ? el.e_title : 0}${
              element[el.e_title]
            }*`);
        });
        element.measure = element.measure.substring(
          0,
          element.measure.length - 1
        );
      });
      // console.log('this.formData.list[this.tempPDTIndex].product :>> ', this.formData.list[this.tempPDTIndex].product);
      // console.log('this.tempPDTList :>> ', this.tempPDTList);
      this.formData.list[this.tempPDTIndex].product.push(...this.tempPDTList);
      this.$nextTick(() => {
        //开辟新栈空间，更改指针
        this.formData.list = JSON.parse(JSON.stringify(this.formData.list));
        this.formData.list[this.tempPDTIndex].product.forEach((el, index) => {
          el.index = index + 1;
        });
        // 置空新增产品对象
        this.tempPDTList = [
          {
            url: [],
            process_property: "",
            process_properties: [],
            tempPDTTypeList: [],
            measure: "",
            //新增产品工艺属性列表
            addPDTProcessAttrList: [
              {
                showValue: "",
                showId: "",
                PDTProcessAttrDetailList: [],
              },
            ],
          },
        ];
        this.showPDTModal = false;
      });
    },
    // 编辑产品→确认
    handlePDTEditConfirm() {
      this.PDTEdit.process_property = "";
      this.PDTEdit.process_properties = "";
      this.PDTEdit.measure = "";
      this.PDTEdit.tempMeasureList.forEach((element) => {
        element.value = this.PDTEdit[element.e_title];
      });
      this.PDTEdit.addPDTProcessAttrList.forEach((el) => {
        this.PDTEdit.process_property += el.showValue + ",";
        this.PDTEdit.process_properties += el.showId + ",";
      });
      this.PDTEdit.process_property = this.PDTEdit.process_property.substring(
        0,
        this.PDTEdit.process_property.length - 1
      );
      this.PDTEdit.process_properties =
        this.PDTEdit.process_properties.substring(
          0,
          this.PDTEdit.process_properties.length - 1
        );
      this.PDTEdit.tempMeasureList.forEach((el) => {
        this.PDTEdit.measure += `${el.e_title}${this.PDTEdit[el.e_title]}*`;
      });
      this.PDTEdit.measure = this.PDTEdit.measure.substring(
        0,
        this.PDTEdit.measure.length - 1
      );
      this.$nextTick(() => {
        // this.formData.list[this.PDTEditAreaIndex].product[this.PDTEditIndex] = this.PDTEdit
        this.showPDTEditModal = false;
        this.formData.list[this.PDTEditAreaIndex].product.splice(
          this.PDTEditIndex,
          1,
          this.PDTEdit
        );
        this.$forceUpdate();
      });
    },
    //添加工艺属性
    handleProcessAdd(item, index) {
      this.tempPDTList[index].addPDTProcessAttrList.push({
        PDTProcessAttrDetailList: [],
      });
    },
    // 编辑添加工艺属性
    handleEditProcessAdd() {
      this.$nextTick(() => {
        !this.PDTEdit.addPDTProcessAttrList &&
          (this.PDTEdit.addPDTProcessAttrList = []);
        this.PDTEdit.addPDTProcessAttrList.push({
          PDTProcessAttrDetailList: [],
        });
        this.$forceUpdate();
      });
    },
    //选择工艺属性
    handleAddPDTAttrChange(item, index, value) {
      item.id = value;
      this.axios("/api/properties_index", { params: { id: value } }).then(
        (res) => {
          item.PDTProcessAttrDetailList = res.data.data;
        }
      );
    },
    //选择工艺属性细节
    handleAddPDTAttrDetailChange(item, index, value) {
      item.showValue = value.label;
      item.showId = value.value;
    },
    // 删除工艺属性
    handleAddPDTDetailDele(arr, index) {
      this.$nextTick(() => {
        arr.splice(index, 1);
        this.$forceUpdate();
      });
    },
    //新增产品
    handleAreaAddPDT(item, index) {
      this.showPDTModal = true;
      // this.tempPDTList = item
      this.tempPDTList = [
        {
          url: [],
          process_property: "",
          process_properties: [],
          tempPDTTypeList: [],
          measure: "",
          measures: [],
          //新增产品工艺属性列表
          addPDTProcessAttrList: [
            {
              showValue: "",
              showId: "",
              PDTProcessAttrDetailList: [],
            },
          ],
        },
      ];
      this.tempPDTIndex = index;
    },
    //新增区域
    handleAreaAdd(target, index) {
      const obj = {
        areaIndex: target.length + 1,
        num: "",
        title: "",
        unit: "",
        quantity: "",
        house_type: "",
        remark: "",
        order_no: "",
        product: [],
        special: [...this.areaSpecValueList],
      };
      // target.push(obj)
      // this.$set(this.formData, 'list', [...this.formData.list, obj])
      this.formData.list.splice(index + 1, 0, obj);
    },
    //删除区域
    handleAreaDele(index) {
      this.formData.list.splice(index, 1);
    },
    handleClientChange(id) {
      id &&
        this.axios({
          method: "get",
          url: "/api/custom_detail",
          params: { id },
        }).then((res) => {
          this.clientDetailList = res.data.list;
          this.formData.service_id = res.data.detail.service_id;
          this.formData.custom_detail_id = this.clientDetailList[0].id || 0;
          this.fax = res.data.detail.fax;
        });
    },
    handleClientDetailChange(value) {
      if (value) {
        let row = this.clientDetailList.filter((item) => item.id == value);
        this.formData.address = row[0].address;
        this.formData.mobile = row[0].mobile;
        this.$forceUpdate();
      }
    },
    //项目辅料新增
    handleAddSup() {
      this.supTableData.push({ index: "", id: "" });
      this.supTableData.forEach((element, index) => {
        element.index = index + 1;
      });
    },
    //项目辅料删除
    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();
        });
      });
    },
    // 产品分类选择→对应不同测量字段
    hanndleAddPDTTypeChange(item, e) {
      e &&
        this.axios("/api/basics_product_index", {
          params: { type_id: e },
        }).then((res) => {
          item.tempPDTTypeList = res.data.data[0].measure_id.split(",");
          this.measureList.forEach((el) => {
            item[el.e_title] = "";
          });
          this.$nextTick(() => {
            item.tempMeasureList = this.measureList;
            this.$forceUpdate();
          });
        });
      // basics_measure_index
    },
    // 添加特殊字段
    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 = [
        { 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: "url_number",
          align: "center",
          tooltip: true,
          minWidth: 80,
        },
        ...arr,
        { title: "备注", key: "remark", align: "center", minWidth: 80 },
        {
          title: "操作",
          key: "remark",
          align: "center",
          slot: "Set",
          minWidth: 120,
        },
      ];
      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;
      }
    },
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='scss' scoped>
.BidSystemContractEdit {
  overflow: hidden;
  overflow-y: auto;
  position: relative;
  top: 20px;
  height: 85%;
  padding-bottom: 20px;
}
.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-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;
}
</style>