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
          @click="showForms = true"
          type="primary"
          style="margin-right: 10px"
          >表单设置</Button
        >
        <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
          v-if="formSetTableData.filter((v) => v.key == 'order_no')[0].is_show"
          :label="formSetTableData.filter((v) => v.key == 'order_no')[0].title"
        >
          <Input
            type="text"
            size="small"
            disabled
            v-model="formData.order_no"
            placeholder="自动生成"
            style="width: 200px"
          />
        </FormItem>
        <FormItem
          v-if="
            formSetTableData.filter((v) => v.key == 'residential_name')[0]
              .is_show
          "
          :label="
            formSetTableData.filter((v) => v.key == 'residential_name')[0].title
          "
        >
          <Input
            type="text"
            :disabled="isChecked"
            size="small"
            v-model="formData.residential_name"
            placeholder="请输入项目名称"
            style="width: 200px"
          />
        </FormItem>
        <FormItem
          v-if="formSetTableData.filter((v) => v.key == 'custom_id')[0].is_show"
          :label="formSetTableData.filter((v) => v.key == 'custom_id')[0].title"
        >
          <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
          v-if="
            formSetTableData.filter((v) => v.key == 'warning_state')[0].is_show
          "
          :label="
            formSetTableData.filter((v) => v.key == 'warning_state')[0].title
          "
        >
          <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
          v-if="
            formSetTableData.filter((v) => v.key == 'front_money')[0].is_show
          "
          :label="
            formSetTableData.filter((v) => v.key == 'front_money')[0].title
          "
        >
          <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
          v-if="
            formSetTableData.filter((v) => v.key == 'custom_detail_id')[0]
              .is_show
          "
          :label="
            formSetTableData.filter((v) => v.key == 'custom_detail_id')[0].title
          "
        >
          <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
          v-if="
            formSetTableData.filter((v) => v.key == 'custom_detail_id')[0]
              .is_show
          "
          :label="
            formSetTableData.filter((v) => v.key == 'custom_detail_id')[0].title
          "
        >
          <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
          v-if="
            formSetTableData.filter((v) => v.key == 'start_time')[0].is_show
          "
          :label="
            formSetTableData.filter((v) => v.key == 'start_time')[0].title
          "
        >
          <DatePicker
            type="date"
            size="small"
            :disabled="isChecked"
            :options="options"
            @on-change="handleStartTimeChange"
            v-model="formData.start_time"
            placeholder=" 年/月/日"
            style="width: 200px"
          ></DatePicker>
        </FormItem>
        <FormItem
          v-if="formSetTableData.filter((v) => v.key == 'end_time')[0].is_show"
          :label="formSetTableData.filter((v) => v.key == 'end_time')[0].title"
        >
          <DatePicker
            type="date"
            size="small"
            :disabled="isChecked"
            :options="options"
            @on-change="handleEndTimeChange"
            v-model="formData.end_time"
            placeholder=" 年/月/日"
            style="width: 200px"
          ></DatePicker>
        </FormItem>
        <FormItem
          v-if="formSetTableData.filter((v) => v.key == 'salesman')[0].is_show"
          :label="formSetTableData.filter((v) => v.key == 'salesman')[0].title"
        >
          <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
          v-if="formSetTableData.filter((v) => v.key == 'remark')[0].is_show"
          :label="formSetTableData.filter((v) => v.key == 'remark')[0].title"
        >
          <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"
          size="small"
          type="primary"
          style="margin-right: 10px"
          >新增区域</Button
        >
        <Button
          @click="handleAreaDele(areaIndex)"
          type="error"
          size="small"
          v-show="areaIndex != 0"
          :disabled="isChecked"
          style="margin-right: 10px"
          >删除区域</Button
        >
        <Button
          @click="handleAreaAddPDT(areaItem, areaIndex)"
          :disabled="isChecked"
          size="small"
          style="margin-right: 10px"
          v-show="
            type == 1 ||
              (type == 2 && !areaItem.id) ||
              (type == 2 && areaItem.isCurrencyArea)
          "
          type="primary"
          >新增产品
        </Button>
        <Button
          @click="handleShowCurrencyArea(areaItem, areaIndex)"
          ghost
          size="small"
          v-show="type != 1 && areaItem.id && !areaItem.isCurrencyArea"
          type="primary"
          >展示产品
        </Button>
      </div>
      <div class="addAreaForm">
        <Form :label-width="100" :model="areaItem" style="width: 60%">
          <FormItem
            v-if="areaSetTableData.filter((v) => v.key == 'num')[0].is_show"
            :label="areaSetTableData.filter((v) => v.key == 'num')[0].title"
          >
            <Input
              type="text"
              size="small"
              :disabled="isChecked"
              v-model="areaItem.num"
              :placeholder="
                '请输入' +
                  areaSetTableData.filter((v) => v.key == 'num')[0].title
              "
              style="width: 120px"
            />
          </FormItem>
          <FormItem
            v-if="areaSetTableData.filter((v) => v.key == 'title')[0].is_show"
            :label="areaSetTableData.filter((v) => v.key == 'title')[0].title"
          >
            <Input
              type="text"
              size="small"
              :disabled="isChecked"
              v-model="areaItem.title"
              :placeholder="
                '请输入' +
                  areaSetTableData.filter((v) => v.key == 'title')[0].title
              "
              style="width: 120px"
            />
          </FormItem>
          <FormItem
            v-if="areaSetTableData.filter((v) => v.key == 'unit')[0].is_show"
            :label="areaSetTableData.filter((v) => v.key == 'unit')[0].title"
          >
            <Input
              type="text"
              size="small"
              :disabled="isChecked"
              v-model="areaItem.unit"
              :placeholder="
                '请输入' +
                  areaSetTableData.filter((v) => v.key == 'unit')[0].title
              "
              style="width: 120px"
            />
          </FormItem>
          <FormItem
            v-if="
              areaSetTableData.filter((v) => v.key == 'quantity')[0].is_show
            "
            :label="
              areaSetTableData.filter((v) => v.key == 'quantity')[0].title
            "
          >
            <Input
              type="text"
              size="small"
              v-model="areaItem.quantity"
              :disabled="isChecked"
              :placeholder="
                '请输入' +
                  areaSetTableData.filter((v) => v.key == 'quantity')[0].title
              "
              style="width: 120px"
            />
          </FormItem>
          <FormItem
            v-if="
              areaSetTableData.filter((v) => v.key == 'house_type')[0].is_show
            "
            :label="
              areaSetTableData.filter((v) => v.key == 'house_type')[0].title
            "
          >
            <Input
              type="text"
              size="small"
              :disabled="isChecked"
              v-model="areaItem.house_type"
              :placeholder="
                '请输入' +
                  areaSetTableData.filter((v) => v.key == 'house_type')[0].title
              "
              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
            v-if="areaSetTableData.filter((v) => v.key == 'remark')[0].is_show"
            :label="areaSetTableData.filter((v) => v.key == 'remark')[0].title"
          >
            <Input
              type="text"
              :disabled="isChecked"
              size="small"
              v-model="areaItem.remark"
              :placeholder="
                '请输入' +
                  areaSetTableData.filter((v) => v.key == 'remark')[0].title
              "
              style="width: 120px"
            />
          </FormItem>
        </Form>
      </div>
      <div class="addAreaTable">
        <Table
          v-show="areaItem.product && areaItem.product.length > 0"
          :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.left_right_mode"
              placeholder="请选择"
              style="width: 120px"
              size="small"
            >
              <Option :value="1" label="左式" />
              <Option :value="2" label="右式" />
            </Select>
          </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
              v-model="_item.id"
              size="small"
              transfer
              @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
              v-model="_item.process_detail"
              filterable
              clearable
              transfer
              label-in-value
              @on-change="
                (value) => handleAddPDTAttrDetailChange(_item, _index, value)
              "
              size="small"
              style="width: 140px"
            >
              <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, tempItem)"
            >添加</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.left_right_mode"
              placeholder="请选择"
              style="width: 120px"
              size="small"
            >
              <Option :value="1" label="左式" />
              <Option :value="2" label="右式" />
            </Select>
          </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"
            v-for="el in PDTEdit.tempPDTTypeList"
            :key="el"
          >
            <FormItem
              :label="_item.title"
              v-for="_item in PDTEdit.tempMeasureList"
              v-show="el == _item.id"
              :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
              v-model="_item.id"
              size="small"
              transfer
              @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
              v-model="_item.process_detail"
              filterable
              clearable
              label-in-value
              transfer
              @on-change="
                (value) => handleAddPDTAttrDetailChange(_item, _index, value)
              "
              size="small"
              style="width: 140px"
            >
              <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>
    <!-- 表单设置 -->
    <Modal
      v-model="showForms"
      @on-ok="postForms(1)"
      class-name="vertical-center-modal"
      style="max-height: 700px; overflow: hidden; overflow-y: auto"
      title="表单设置"
    >
      <Tabs value="form1">
        <TabPane label="订单表单设置" name="form1">
          <Table
            :max-height="600"
            border
            :columns="formSetTableColumns"
            :data="post_formSetTableData"
          >
          </Table>
        </TabPane>
        <TabPane label="区域表单设置" name="form2">
          <Table
            :max-height="600"
            border
            :columns="areaSetTableColumns"
            :data="post_areaSetTableData"
          >
          </Table>
        </TabPane>
        <TabPane label="产品表头设置" name="form3">
          <Table
            :max-height="600"
            border
            :columns="productSetTableColumns"
            :data="post_productSetTableData"
          >
          </Table>
        </TabPane>
      </Tabs>
    </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: () => {
                  // 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: "set",
          align: "center",
          slot: "Set",
          minWidth: 120,
        },
      ],
      supTableColumns: [
        { title: "序号", type: "index", align: "center", minWidth: 100 },
        {
          title: "辅料名称",
          key: "title",
          align: "center",
          slot: "combine",
          minWidth: 150,
        },
        { title: "操作", align: "center", slot: "supSet", minWidth: 100 },
      ],
      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: [],
      type: this.$route.query.type,
      showForms: false,
      formSetTableData: [
        {
          is_show: true,
          key: "order_no",
          value: "订单编号",
          title: "订单编号",
        },
        {
          is_show: true,
          key: "residential_name",
          value: "项目名称",
          title: "项目名称",
        },
        {
          is_show: true,
          key: "custom_id",
          value: "客户姓名",
          title: "客户姓名",
        },
        {
          is_show: true,
          key: "warning_state",
          value: "紧急程度",
          title: "紧急程度",
        },
        {
          is_show: true,
          key: "front_money",
          value: "项目定金",
          title: "项目定金",
        },
        {
          is_show: true,
          key: "custom_detail_id",
          value: "详细地址",
          title: "详细地址",
        },
        {
          is_show: true,
          key: "custom_detail_id",
          value: "手机号",
          title: "手机号",
        },
        {
          is_show: true,
          key: "start_time",
          value: "开始日期",
          title: "开始日期",
        },
        {
          is_show: true,
          key: "end_time",
          value: "结束日期",
          title: "结束日期",
        },
        {
          is_show: true,
          key: "salesman",
          value: "业务员",
          title: "业务员",
        },
        {
          is_show: true,
          key: "remark",
          value: "备注",
          title: "备注",
        },
      ],
      areaSetTableData: [
        {
          is_show: true,
          key: "num",
          value: "区域编码",
          title: "区域编码",
        },
        {
          is_show: true,
          key: "title",
          value: "区域名称",
          title: "区域名称",
        },
        {
          is_show: true,
          key: "unit",
          value: "单位",
          title: "单位",
        },
        {
          is_show: true,
          key: "quantity",
          value: "工程量",
          title: "工程量",
        },
        {
          is_show: true,
          key: "house_type",
          value: "户型",
          title: "户型",
        },
        {
          is_show: true,
          key: "remark",
          value: "备注",
          title: "备注",
        },
      ],
      productSetTableData: [
        {
          is_show: true,
          key: "index",
          value: "序号",
          title: "序号",
        },
        {
          is_show: true,
          key: "title",
          value: "产品名称",
          title: "产品名称",
        },
        {
          is_show: true,
          key: "num",
          value: "数量",
          title: "数量",
        },
        {
          is_show: true,
          key: "price",
          value: "价格",
          title: "价格",
        },
        {
          is_show: true,
          key: "measure",
          value: "规格",
          title: "规格",
        },
        {
          is_show: true,
          key: "process_property",
          value: "工艺属性",
          title: "工艺属性",
        },
        {
          is_show: true,
          key: "url",
          value: "图纸",
          title: "图纸",
        },
        {
          is_show: true,
          key: "left_right_mode",
          value: "左右式",
          title: "左右式",
        },
        {
          is_show: true,
          key: "url_number",
          value: "图号",
          title: "图号",
        },
        {
          is_show: true,
          key: "remark",
          value: "备注",
          title: "备注",
        },
        {
          is_show: true,
          key: "set",
          value: "操作",
          title: "操作",
        },
      ],
      formSetTableColumns: [
        {
          title: "是否展示",
          align: "center",
          key: "is_show",
          minWidth: 120,
          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 == "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: 180,
        },
        {
          title: "展示名称",
          align: "center",
          key: "title",
          minWidth: 180,
          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);
                },
              },
            });
          },
        },
      ],
      areaSetTableColumns: [
        {
          title: "是否展示",
          align: "center",
          key: "is_show",
          minWidth: 120,
          render: (h, params) => {
            const { index } = params;
            const currentRow = JSON.parse(
              JSON.stringify(this.post_areaSetTableData[index])
            );
            return h("Checkbox", {
              props: {
                value: currentRow.is_show,
                // disabled:
                //   currentRow.key == "fax_price" ||
                //   currentRow.key == "remark",
              },
              on: {
                "on-change": (e) => {
                  currentRow.is_show = e;
                  this.post_areaSetTableData.splice(index, 1, currentRow);
                },
              },
            });
          },
        },
        {
          title: "字段名",
          align: "center",
          key: "value",
          minWidth: 180,
        },
        {
          title: "展示名称",
          align: "center",
          key: "title",
          minWidth: 180,
          render: (h, params) => {
            const { index } = params;
            const currentRow = JSON.parse(
              JSON.stringify(this.post_areaSetTableData[index])
            );
            return h("Input", {
              props: {
                value: currentRow.title,
                type: "text",
              },
              on: {
                "on-change": (e) => {
                  currentRow.title = e.target.value;
                  this.post_areaSetTableData.splice(index, 1, currentRow);
                },
              },
            });
          },
        },
      ],
      productSetTableColumns: [
        {
          title: "是否展示",
          align: "center",
          key: "is_show",
          minWidth: 120,
          render: (h, params) => {
            const { index } = params;
            const currentRow = JSON.parse(
              JSON.stringify(this.post_productSetTableData[index])
            );
            return h("Checkbox", {
              props: {
                value: currentRow.is_show,
                // disabled:
                //   currentRow.key == "fax_price" ||
                //   currentRow.key == "remark",
              },
              on: {
                "on-change": (e) => {
                  currentRow.is_show = e;
                  this.post_productSetTableData.splice(index, 1, currentRow);
                },
              },
            });
          },
        },
        {
          title: "字段名",
          align: "center",
          key: "value",
          minWidth: 180,
        },
        {
          title: "展示名称",
          align: "center",
          key: "title",
          minWidth: 180,
          render: (h, params) => {
            const { index } = params;
            const currentRow = JSON.parse(
              JSON.stringify(this.post_productSetTableData[index])
            );
            return h("Input", {
              props: {
                value: currentRow.title,
                type: "text",
              },
              on: {
                "on-change": (e) => {
                  currentRow.title = e.target.value;
                  this.post_productSetTableData.splice(index, 1, currentRow);
                },
              },
            });
          },
        },
      ],
      post_formSetTableData: [],
      post_areaSetTableData: [],
      post_productSetTableData: [],
    };
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    //2编辑  3详情  1新增
    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;
    });
    this.get_forms();
  },
  // 生命周期 - 挂载完成（可以访问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,
          type: 1,
        },
      }).then((res) => {
        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].length > 0 &&
          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: () => {
                    // 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: "remark",
            align: "center",
            slot: "Set",
            minWidth: 120,
          },
        ];
        // 订单特殊字段
        this.formData.special &&
          this.formData.special.length > 0 &&
          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.length > 0 &&
            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]
          : [];
        //获取客户信息
        this.axios
          .get("/api/custom_detail", { params: { id: res.data.custom_id } })
          .then((res) => {
            this.clientDetailList = res.data.list;
            // this.fax = res.data.detail.fax;
          });
      });
    },
    postData() {
      this.formData.list.map((list) => {
        list.product &&
          list.product.length > 0 &&
          list.product.map((product) => {
            product.special &&
              product.special.map((value) => {
                value.value = product[value.key];
              });
          });
      });
      //1新增 2编辑
      let ip;
      if (this.type == 1) {
        ip = "order_area_add";
        this.axios({
          method: "post",
          url: "/api/" + ip,
          data: {
            ...this.formData,
            ext: this.supTableData,
            head: { 3: this.productSpecValueList },
          },
        }).then((res) => {
          if (res.code == 200) {
            this.$Message.success(res.msg);
            this.goback();
          }
        });
      } else if (this.type == 2) {
        ip = "order_area_edit";
        // const curObj = this.formData.list.filter((item) => item.isCurrencyArea);
        let curObj;
        //去当前展开项区域
        this.formData.list.forEach((element) => {
          if (element.isCurrencyArea) {
            curObj = element;
          }
        });
        curObj.product.forEach((element) => {
          if (!element.url) {
            element.url = [];
          }
        });
        this.axios
          .post("/api/order_area_product_edit", {
            order_no: this.$route.query.order_no,
            area_id: curObj.id || "",
            type: 1,
            // num:curObj.num,
            // title:curObj.title,
            // unit:curObj.unit,
            // quantity:curObj.quantity,
            // house_type:curObj.house_type,
            product: curObj.product,
          })
          .then((res) => {
            if (res.code == 200) {
              curObj.id = res.data.area_id;
              this.axios
                .post("/api/" + ip, {
                  ...this.formData,
                  ext: this.supTableData,
                  head: { 3: this.productSpecValueList },
                })
                .then((re) => {
                  if (re.code == 200) {
                    this.$Message.success(re.msg);
                    this.goback();
                  }
                });
            }
          });
      }
    },
    // 操作table数据 3编辑 4删除
    handleSet(row, index, type, table, areaIndex) {
      switch (type) {
        case 3:
          this.PDTEdit = row;
          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.$route.query.type == 2 &&
            (this.PDTEdit.tempMeasureList = JSON.parse(
              JSON.stringify(this.measureList)
            ));

          //获取属性
          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.tempPDTTypeList = res.data.data[0].measure_id.split(
              ","
            );
            this.PDTEdit.tempMeasureList = JSON.parse(
              JSON.stringify(this.measureList)
            );
            this.PDTEdit.tempMeasureList.forEach((el) => {
              for (const i in newmeasureList) {
                const item = newmeasureList[i];
                if (item.indexOf(el.e_title) != -1) {
                  this.PDTEdit[el.e_title] = item.substring(1);
                }
              }
              // this.PDTEdit[el.e_title] = "";
            });
            this.PDTEdit = JSON.parse(JSON.stringify(this.PDTEdit));
            this.$forceUpdate();
          });
          this.showPDTEditModal = true;
          break;
        case 4:
          table.splice(index, 1);
          this.$forceUpdate();
          break;
      }
    },
    //新增产品复制
    handleAddPDTCopy(item, index) {
      const temp = JSON.parse(JSON.stringify(item));
      this.tempPDTList.splice(index + 1, 0, temp);
    },
    //新增产品添加
    handleAddPDTAdd(index, row) {
      this.tempPDTList.splice(index + 1, 0, {
        addPDTProcessAttrList: [],
        measure: "",
        measures: [],
        process_property: "",
        url: [],
        tempPDTTypeList: [],
        process_properties: [],
      });
    },
    //新增产品删除
    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
        );
        if (
          element.process_properties &&
          element.process_properties.length > 0
        ) {
          element.process_properties = element.process_properties.substring(
            0,
            element.process_properties.length - 1
          );
        }
        element.tempMeasureList &&
          element.tempMeasureList.length > 0 &&
          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
        );
      });
      if (!this.formData.list[this.tempPDTIndex].product) {
        this.formData.list[this.tempPDTIndex].product = [];
      }
      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;
      });
    },
    get_forms() {
      this.axios
        .post("/api/update/get_table", { id: "ContractList_edit" })
        .then((res) => {
          if (Array.isArray(res.data)) {
            this.post_formSetTableData = JSON.parse(
              JSON.stringify(this.formSetTableData)
            );
            this.post_areaSetTableData = JSON.parse(
              JSON.stringify(this.areaSetTableData)
            );
            this.post_productSetTableData = JSON.parse(
              JSON.stringify(this.productSetTableData)
            );
          } 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)
              );
            }
            if (res.data.table.areaSet && res.data.table.areaSet.length > 0) {
              this.areaSetTableData = JSON.parse(
                JSON.stringify(res.data.table.areaSet)
              );
              this.post_areaSetTableData = JSON.parse(
                JSON.stringify(res.data.table.areaSet)
              );
            } else {
              this.post_areaSetTableData = JSON.parse(
                JSON.stringify(this.areaSetTableData)
              );
            }
          }
        });
    },
    postForms(n) {
      this.post_formSetTableData.forEach((element, index) => {
        element.sort = index;
      });
      this.axios({
        method: "post",
        url: "/api/update/table",
        data: {
          id: "ContractList_edit",
          result: {
            formSet: this.post_formSetTableData,
            areaSet: this.post_areaSetTableData,
          },
        },
      }).then((res) => {
        if (res.code == 200) {
          this.$Message.success(res.msg);
          this.get_forms();
        }
      });
    },
    // 编辑产品→确认
    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[el.e_title] &&
          (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.formData.list[this.PDTEditAreaIndex].product[
        this.PDTEditIndex
      ] = this.PDTEdit;
      //强制更新视图
      this.formData.list = JSON.parse(JSON.stringify(this.formData.list));
      this.showPDTEditModal = false;
    },
    //添加工艺属性
    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: "",
        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);
    },
    // 展示区域产品
    handleShowCurrencyArea(item, index) {
      const preObj = this.formData.list.filter((item) => item.isCurrencyArea);
      // 判断当前打开是否与上一个是否一致
      if (preObj[0].id != item.id) {
        // 1.保存上一个展开的区域及产品
        this.axios
          .post("/api/order_area_product_edit", {
            order_no: this.$route.query.order_no,
            area_id: preObj[0].id || "",
            product: preObj[0].product,
            type: 1,
          })
          .then((result) => {
            if (result.code == 200) {
              preObj[0].id = result.data.area_id;
              // 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,
                    area_id: item.id,
                    type: 1,
                  },
                })
                .then((res) => {
                  if (res.code == 200) {
                    if (!item.product) {
                      item.product = [];
                    }
                    item.product = res.data;
                    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);
                            }
                          });
                        });
                    });
                    this.$forceUpdate();
                  }
                });
            }
          });
      } else {
        // 2.获取当前展开区域及产品
        item.isCurrencyArea = true;
        this.axios
          .get("/api/order_area_list_product", {
            params: {
              order_no: this.$route.query.order_no,
              area_id: item.id,
              type: 1,
            },
          })
          .then((res) => {
            if (res.code == 200) {
              if (!item.product) {
                item.product = [];
              }
              item.product = res.data;
              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);
                      }
                    });
                  });
              });
              this.$forceUpdate();
            }
          });
      }
    },
    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({ 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(",");
          item.tempMeasureList = JSON.parse(JSON.stringify(this.measureList));
          item.tempMeasureList.forEach((el) => {
            item[el.e_title] = "";
          });
          this.$forceUpdate();
        });
      // basics_measure_index
    },
    // 添加特殊字段
    handleAddInputConfirm() {
      this.formData.special = JSON.parse(
        JSON.stringify(this.contactSpecValueList)
      );
      this.formData.list.length > 0 &&
        this.formData.list.forEach((element) => {
          element.special = JSON.parse(JSON.stringify(this.areaSpecValueList));
          element.product &&
            element.product.length > 0 &&
            element.product.forEach((ele) => {
              ele.special = JSON.parse(
                JSON.stringify(this.productSpecValueList)
              );
            });
        });
      let arr = [];
      this.productSpecValueList.length > 0 &&
        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: () => {
                  // 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: "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 {
      padding-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>