jf-frock/src/views/BidSystem/DeepeningOrder/detail.vue

<template>
  <div class="BidSystemDeepeningOrderDetail">
    <Toptitle :title="type == 2 ? '深化单编辑' : '深化单详情'">
      <slot name="titleButton">
        <Button
          @click="handleFinish(0)"
          type="primary"
          style="margin-right: 10px"
          >取消完成</Button
        >
        <Button
          @click="handleFinish(1)"
          type="primary"
          style="margin-right: 10px"
          >完成</Button
        >
        <Button
          @click="showSupModal = true"
          v-show="!isChecked"
          type="primary"
          style="margin-right:10px;"
          >项目辅料</Button
        >
        <!-- <Upload style="display: inline"
                name="your_file"
                :show-upload-list="false"
                :headers="headers"
                multiple
                :data="uploadData"
                :before-upload="handleBeforeUpload"
                :on-error="uploadError"
                :on-progress="onProgress"
                :on-success="uploadSuccess"
                :action="$store.state.ip + '/api/deep_img_import'">
          <Button type="primary"
                  :disabled="isChecked"
                  style="margin-right: 10px">图纸导入</Button>
        </Upload> -->
        <UploadImg
          :data="uploadData"
          :isChecked="!isChecked"
          style="margin-right:10px;vertical-align: top;"
          :action="$store.state.ip + '/api/deep_img_import'"
          :headers="headers"
        ></UploadImg>
        <Upload
          style="display: inline"
          name="your_file"
          :show-upload-list="false"
          :headers="headers"
          :on-error="uploadError"
          :on-success="uploadSuccess"
          :action="$store.state.ip + '/api/order_area_product_import'"
        >
          <Button type="primary" v-show="!isChecked" style="margin-right: 10px"
            >导入</Button
          >
        </Upload>
        <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>
    <Tabs value="name1" @on-click="handleCurTabChange">
      <TabPane
        label="块状形式"
        name="name1"
        style="overflow: hidden; overflow-y: auto"
      >
        <div class="top_search_name1">
          <div>
            <span>订单号:</span
            ><span style="font-weight:bold">{{ formData.order_no }}</span>
          </div>
          <div>
            <span>项目名称:</span
            ><span style="font-weight:bold">{{
              formData.residential_name
            }}</span>
          </div>
          <div>
            <span>客户姓名:</span
            ><span style="font-weight:bold">{{ formData.client_name }}</span>
          </div>
          <div>
            <span>紧急程度:</span
            ><span
              v-for="_item in warningList"
              :key="_item.id"
              v-show="_item.id == formData.warning_state"
              :style="{ color: _item.color }"
              style="font-weight:bold"
              >{{ _item.title }}</span
            >
          </div>
          <div>
            <span>收款:</span
            ><span style="font-weight:bold">{{
              formData.pay_state == 1 ? "已收款" : "未收款"
            }}</span>
          </div>
          <div>
            <span>详细地址:</span
            ><span style="font-weight:bold">{{ formData.address }}</span>
          </div>
          <div>
            <span>手机号:</span
            ><span style="font-weight:bold">{{ formData.mobile }}</span>
          </div>
          <div>
            <span>开始日期:</span
            ><span style="font-weight:bold">{{
              func.replaceDateNoHMS(formData.start_time)
            }}</span>
          </div>
          <div>
            <span>交付日期:</span
            ><span style="font-weight:bold">{{
              func.replaceDateNoHMS(formData.end_time)
            }}</span>
          </div>
          <div>
            <span>业务员:</span>
            <span
              v-for="item in salesmanList"
              :key="item.id"
              v-show="formData.salesman == item.id"
              style="font-weight:bold"
              >{{ item.nickname }}</span
            >
          </div>
          <!-- <div>
        <span>订单类型:</span
        ><span style="font-weight:bold">{{
          formData.renovation_type == 1 ? "工装" : "家装"
        }}</span>
      </div> -->
          <div v-for="item in formData.special" :key="item.id">
            <span>{{ item.key + ":" }}</span>
            <span style="font-weight:bold">{{ item.value }}</span>
          </div>
          <div>
            <span>备注:</span
            ><span style="font-weight:bold">{{ formData.remark }}</span>
          </div>
        </div>
        <div
          class="table-data"
          v-for="(item, index) in formData.list"
          :key="item.id"
        >
          <div class="addBtn">
            <Button
              @click="handleAddPDT(item, index)"
              :disabled="isChecked"
              size="small"
              style="margin-right: 10px"
              type="primary"
              >新增产品</Button
            >
            <!-- <Button
              @click="handleHiddenCurrencyArea(item, index)"
              ghost
              size="small"
              v-show="!(type != 1 && item.id && !item.isCurrencyArea)"
              type="primary"
              >收缩
            </Button> -->
            <Button
              @click="handleShowCurrencyArea(item, index)"
              ghost
              size="small"
              v-show="type != 1 && item.id && !item.isCurrencyArea"
              type="primary"
              >展示产品
            </Button>
          </div>
          <div class="addAreaForm">
            <div class="addFormInfo">
              <div><span>区域编码:</span>{{ item.num }}</div>
              <div><span>区域名称:</span>{{ item.title }}</div>
              <div><span>单位:</span>{{ item.unit }}</div>
              <div><span>工程量:</span>{{ item.quantity }}</div>
              <div><span>户型:</span>{{ item.house_type }}</div>
              <div v-for="ele in item.special" :key="ele.id">
                <span>{{ ele.key }}:</span>{{ ele.value }}
              </div>
              <div><span>备注:</span>{{ item.remark }}</div>
            </div>
            <div class="addAreaTable">
              <Table
                v-show="item.isCurrencyArea"
                :columns="tableColumns"
                max-height="600"
                @on-selection-change="handleSelection"
                :data="item.product"
                border
              >
                <template slot="urlSet" slot-scope="{ row }">
                  <span
                    class="urlSetStyle"
                    v-for="(item, index) in row.url"
                    :key="index"
                  >
                    <img
                      :src="$store.state.ip + item"
                      @click="(e) => handleImgClick(e, row)"
                      alt=""
                    />
                  </span>
                </template>
                <template slot="statusSlot" slot-scope="{ row }">
                  {{ row.status == 1 ? "已完成" : "未完成" }}
                </template>
                <template slot="set" slot-scope="{ row, index }">
                  <a
                    style="margin:0 5px"
                    :disabled="row.status == 1"
                    @click="handleSet(row, index, 1, item)"
                    >深化</a
                  >
                  <a
                    style="margin:0 5px"
                    @click="handleSet(row, index, 2, item)"
                    >详情</a
                  >
                  <a
                    style="margin:0 5px"
                    @click="handleSet(row, index, 3, item)"
                    >删除</a
                  >
                </template>
              </Table>
            </div>
          </div>
        </div>
      </TabPane>
      <TabPane
        label="列表形式"
        name="name2"
        style="overflow: hidden; overflow-y: auto"
      >
        <div class="top_search">
          <div class="top_search_content">
            <Form
              :model="searchData"
              :label-width="100"
              class="top_search_form"
            >
              <FormItem label="区域编码:">
                <Select
                  filterable
                  clearable
                  v-model="searchData.area_no"
                  size="small"
                  style="width:120px"
                >
                  <Option
                    v-for="(_item, _index) in area_no_list"
                    :key="_index"
                    :label="_item"
                    :value="_item"
                  ></Option>
                </Select>
              </FormItem>
              <FormItem label="区域名称:">
                <Select
                  filterable
                  clearable
                  v-model="searchData.area_title"
                  size="small"
                  style="width:120px"
                >
                  <Option
                    v-for="(_item, _index) in area_title_list"
                    :key="_index"
                    :label="_item"
                    :value="_item"
                  ></Option>
                </Select>
              </FormItem>
              <FormItem label="产品名称:">
                <Select
                  filterable
                  clearable
                  v-model="searchData.product_title"
                  size="small"
                  style="width:120px"
                >
                  <Option
                    v-for="(_item, _index) in product_title_list"
                    :key="_index"
                    :label="_item"
                    :value="_item"
                  ></Option>
                </Select>
              </FormItem>
              <FormItem label="图号:">
                <Select
                  filterable
                  clearable
                  v-model="searchData.url_number"
                  size="small"
                  style="width:120px"
                >
                  <Option
                    v-for="(_item, _index) in url_number_list"
                    :key="_index"
                    :label="_item"
                    :value="_item"
                  ></Option>
                </Select>
              </FormItem>
              <FormItem label="是否完成:">
                <Select
                  clearable
                  v-model="searchData.status"
                  size="small"
                  style="width:120px"
                >
                  <Option label="是" :value="1"></Option>
                  <Option label="否" :value="0"></Option>
                </Select>
              </FormItem>
              <FormItem label="是否下拆单:">
                <Select
                  clearable
                  v-model="searchData.sub_state"
                  size="small"
                  style="width:120px"
                >
                  <Option label="是" :value="2"></Option>
                  <Option label="否" :value="1"></Option>
                </Select>
              </FormItem>
              <!-- <FormItem label="状态:">
                <Select
                  clearable
                  v-model="searchData.sub_state"
                  size="small"
                  style="width:120px"
                >
                  <Option label="已完成" :value="1"></Option>
                  <Option label="未完成" :value="0"></Option>
                </Select>
              </FormItem> -->
              <FormItem>
                <Button @click="getListData" type="primary" size="small"
                  >搜索</Button
                >
              </FormItem>
            </Form>
          </div>
          <Form :model="formData" :label-width="100" class="top_search_form">
            <FormItem label="订单号:">
              {{ formData.order_no }}
            </FormItem>
            <FormItem label="项目名称:">
              {{ formData.residential_name }}
            </FormItem>
            <FormItem label="客户姓名:">
              {{ formData.client_name }}
            </FormItem>
            <FormItem label="紧急程度:">
              <span
                v-for="_item in warningList"
                :key="_item.id"
                v-show="_item.id == formData.warning_state"
                :style="{ color: _item.color }"
                >{{ _item.title }}
              </span>
            </FormItem>
            <FormItem label="项目定金:">
              {{ formData.front_money }}
            </FormItem>
            <FormItem label="详细地址:">
              {{ formData.address }}
            </FormItem>
            <FormItem label="手机号:">
              {{ formData.mobile }}
            </FormItem>
            <FormItem label="开始日期:">
              {{
                formData.start_time
                  ? func.replaceDateNoHMS(formData.start_time)
                  : ""
              }}
            </FormItem>
            <FormItem label="结束日期:">
              {{
                formData.end_time
                  ? func.replaceDateNoHMS(formData.end_time)
                  : ""
              }}
            </FormItem>
            <FormItem label="业务员:">
              <span
                v-for="_item in salesmanList"
                :key="_item.id"
                v-show="_item.id == formData.salesman"
                :style="{ color: _item.color }"
                >{{ _item.nickname }}
              </span>
            </FormItem>
            <FormItem
              v-for="item in formData.special"
              :key="item.id"
              :label="item.key + ':'"
            >
              {{ item.value }}
            </FormItem>
            <FormItem label="备注:">
              {{ formData.remark }}
            </FormItem>
          </Form>
        </div>
        <div>
          <Table
            :columns="listTableColumns"
            :data="listTableData"
            @on-selection-change="handleSelection"
            :max-height="500"
            border
          >
            <template slot="statusSlot" slot-scope="{ row }">
              {{ row.status == 1 ? "已完成" : "未完成" }}
            </template>
            <template slot="set" slot-scope="{ row, index }">
              <a
                style="margin:0 5px"
                :disabled="row.status == 1"
                @click="handleSet(row, index, 1, formData)"
                >深化</a
              >
              <a
                style="margin: 0 5px"
                @click="handleSet(row, index, 2, formData)"
                >详情</a
              >
            </template>
          </Table>
        </div>
        <div ref="footercenter" class="footer-center">
          <Page
            :total="total"
            :current.sync="page_index"
            :show-total="true"
            :page-size="page_size"
            :show-sizer="true"
            :show-elevator="true"
            @on-change="changePage"
            @on-page-size-change="changeSize"
          >
          </Page>
        </div>
      </TabPane>
    </Tabs>
    <!-- 项目辅料弹窗 -->
    <Modal title="项目辅料" v-model="showSupModal" :width="400">
      <div>
        <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>
    <!-- 新增产品弹窗 -->
    <el-dialog
      title="新增产品"
      :visible.sync="showPDTModal"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      class="addPDTFormModal"
      width="1000px"
    >
      <div
        class="addPDTForm"
        v-for="(item, index) in tempPDTList"
        :key="item.id"
      >
        <Form :label-width="100" :model="item">
          <FormItem label="产品名称:">
            <Input
              type="text"
              size="small"
              placeholder="请输入"
              v-model="item.title"
              style="width: 120px"
            />
          </FormItem>
          <FormItem label="数量">
            <Input
              type="text"
              size="small"
              v-model="item.num"
              placeholder="请输入"
              style="width: 120px"
            />
          </FormItem>
          <FormItem label="图号:">
            <Input
              type="text"
              size="small"
              placeholder="请输入"
              v-model="item.url_number"
              style="width: 120px"
            />
          </FormItem>
          <FormItem label="图纸">
            <div class="product-img">
              <div class="product-add">
                <div
                  class="items"
                  v-for="(_item, _index) of item.url"
                  :key="_index"
                >
                  <img
                    @click="looks(_item)"
                    :src="$store.state.ip + _item"
                    alt=""
                  />
                  <Icon
                    size="20"
                    @click="delItems(_index, item.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, item.url)"
                    type="file"
                    class="ipt"
                  />
                </div>
              </div>
            </div>
          </FormItem>
          <FormItem label="左右式">
            <Select
              v-model="item.left_right_mode"
              placeholder="请选择"
              style="width: 120px"
              size="small"
            >
              <Option :value="1" label="左式" />
              <Option :value="2" label="右式" />
              <Option :value="0" label="无" />
            </Select>
          </FormItem>
          <FormItem label="产品分类">
            <el-cascader
              clearable
              v-model="item.type_id"
              size="small"
              style="width: 120px"
              :show-all-levels="false"
              :options="PDTTypeList"
              :props="{
                expandTrigger: 'hover',
                children: 'child',
                value: 'id',
                label: 'title',
                checkStrictly: true,
                emitPath: false,
              }"
              @change="(e) => hanndleAddPDTTypeChange(item, e)"
            ></el-cascader>
            <!-- <Select
              v-model="item.type_id"
              placeholder="请选择"
              style="width:120px"
              label-in-value
              @on-change="(e) => hanndleAddPDTTypeChange(item, 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 item.tempPDTTypeList"
            :key="el"
          >
            <FormItem
              :label="_item.title"
              v-for="_item in item.tempMeasureList"
              v-show="el == _item.id"
              :key="_item.id"
            >
              <Input
                type="text"
                size="small"
                v-model="_item.value"
                placeholder="请输入"
                style="width: 120px"
              />
            </FormItem>
          </div>
          <!-- <FormItem label="价格:">
            <Input
              type="text"
              size="small"
              v-model="item.price"
              placeholder="请输入备注"
              style="width: 120px"
            />
          </FormItem> -->
          <FormItem label="备注:">
            <Input
              type="text"
              size="small"
              v-model="item.remark"
              placeholder="请输入备注"
              style="width: 120px"
            />
          </FormItem>
          <FormItem label="工艺属性">
            <Button
              @click="handleProcessAdd(item, index)"
              size="small"
              type="text"
              style="color:#57a3f3"
              >添加属性</Button
            >
          </FormItem>
        </Form>
        <div class="addPDTProcess">
          <div
            v-for="(_item, _index) in item.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.type_id"
              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="item.addPDTProcessAttrList.length != 1" -->
              <Icon
                type="ios-trash"
                @click="
                  handleAddPDTDetailDele(item.addPDTProcessAttrList, _index)
                "
              />
            </div>
          </div>
        </div>
        <div class="addPDTBtn">
          <Button
            type="primary"
            v-show="false"
            style="margin-right:10px;"
            @click="handleAddPDTCopy(item, index)"
            >复制</Button
          >
          <Button
            type="primary"
            v-show="false"
            style="margin-right:10px;"
            @click="handleAddPDTAdd(index)"
            >添加</Button
          >
          <Button
            type="error"
            v-show="false"
            style="margin-right:10px;"
            @click="handleAddPDTDele(index)"
            >删除</Button
          >
        </div>
      </div>
      <div class="modal-footer" slot="footer">
        <Button style="margin-right:10px" @click="showPDTModal = false"
          >取消</Button
        >
        <Button type="primary" @click="handleAddPDTConfirm">确认</Button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import UploadImg from "./uploadImg/index.vue";
export default {
  name: "",
  components: {
    UploadImg,
  },
  props: {},
  // import引入的组件需要注入到对象中才能使用
  data() {
    // 这里存放数据
    return {
      headers: { Authorization: localStorage.getItem("token") },
      salesmanList: [],
      PDTTypeList: [],
      combineList: [],
      tempPDTList: [
        {
          url: [],
          process_property: "",
          process_properties: [],
          tempPDTTypeList: [],
          measure: "",
          //新增产品工艺属性列表
          addPDTProcessAttrList: [
            {
              showValue: "",
              showId: "",
              PDTProcessAttrDetailList: [],
            },
          ],
        },
      ],
      tempPDTIndex: 0,
      supTableData: [],
      showPDTModal: false,
      showSupModal: false,
      formData: {
        order_no: "",
        residential_name: "",
        client_name: "",
        address: "",
        mobile: "",
        pay_state: "",
        warning_state: "",
        salesman: "",
        remark: "",
        start_time: "",
        end_time: "",
        type: "",
        //区域列表
        list: [
          {
            areaIndex: 1,
            num: "",
            title: "",
            unit: "",
            quantity: "",
            house_type: "",
            remark: "",
            order_no: "",
            product: [],
          },
        ],
      },
      tableColumns: [
        { type: "selection", align: "center", minWidth: 60 },
        { title: "序号", key: "index", align: "center", minWidth: 80 },
        { title: "产品名称", key: "title", align: "center", minWidth: 140 },
        { title: "数量", key: "num", align: "center", minWidth: 80 },
        // { title: "价格", key: "price", align: "center", minWidth: 80 },
        { title: "规格", key: "measure", align: "center", minWidth: 140 },
        {
          title: "工艺属性",
          key: "process_property",
          align: "center",
          minWidth: 140,
          tooltip: true,
        },
        {
          title: "图纸",
          align: "center",
          key: "url",
          minWidth: 80,
          slot: "urlSet",
        },
        {
          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", minWidth: 90 },
        // { title: '型号', key: 'model', align: 'center', minWidth: 80 },
        { title: "备注", key: "remark", align: "center", minWidth: 80 },
        {
          title: "状态",
          key: "status",
          align: "center",
          minWidth: 80,
          slot: "statusSlot",
        },
        {
          title: "操作",
          key: "remark",
          align: "center",
          width: "120",
          slot: "set",
        },
      ],
      productDetail: {},
      supTableColumns: [
        { title: "序号", type: "index", align: "center", minWidth: 100 },
        {
          title: "辅料名称",
          key: "title",
          align: "center",
          slot: "combine",
          minWidth: 150,
        },
        { title: "操作", align: "center", slot: "supSet", minWidth: 100 },
      ],
      //是否查看
      isChecked: false,
      PDTProcessAttrList: [],
      // 测量字段列表
      measureList: [],
      order_area_id: "",
      uploadData: {
        order_no: this.$route.query.order_no,
        title: "",
      },
      contactSpecValueList: [{ key: "", value: "" }],
      areaSpecValueList: [{ key: "", value: "" }],
      productSpecValueList: [{ key: "", value: "" }],
      warningList: [],
      type: this.$route.query.type,
      currencyTab: "",
      page_index: 1,
      page_size: 10,
      total: 0,
      searchData: {},
      listTableData: [],
      selected: [],
      listTableColumns: [
        { type: "selection", align: "center", minWidth: 100 },
        { title: "区域编码", key: "area_num", align: "center", minWidth: 100 },
        {
          title: "区域名称",
          key: "area_title",
          align: "center",
          minWidth: 100,
        },
        { title: "单位", key: "area_unit", align: "center", minWidth: 100 },
        {
          title: "工程量",
          key: "area_quantity",
          align: "center",
          minWidth: 100,
        },
        { title: "户型", key: "house_type", align: "center", minWidth: 100 },
        { title: "备注", key: "remark", align: "center", minWidth: 100 },
        { title: "产品名称", key: "title", align: "center", minWidth: 100 },
        { title: "数量", key: "num", align: "center", minWidth: 100 },
        // { title: "价格", key: "price", align: "center", minWidth: 100 },
        { title: "规格", key: "measure", align: "center", minWidth: 100 },
        {
          title: "工艺属性",
          key: "process_property",
          align: "center",
          minWidth: 100,
        },
        {
          title: "图纸",
          key: "url",
          align: "center",
          minWidth: 100,
          render: (h, params) => {
            const { row } = params;
            let url = row.url ? row.url : [];
            return h("img", {
              attrs: {
                src: this.$store.state.ip + url[0],
                style:
                  "max-width:50px;max-height:50px;position:relative;top:3px;",
              },
              on: {
                click: (e) => {
                  // this.axios('/api/orders_img', { params: { id: row.id, type: 1 } }).then(res => {
                  // row.imgs = res.data
                  let list = [];
                  row.url.forEach((el) => {
                    list.push({ img_url: el });
                  });
                  this.$previewImg({
                    list,
                    baseUrl: this.$store.state.ip,
                    baseImgField: "img_url",
                    baseTitleField: "",
                  });
                  // })
                },
              },
            });
          },
        },
        {
          title: "左右式",
          key: "left_right_mode",
          align: "center",
          minWidth: 100,
          render: (h, params) => {
            return h(
              "span",
              {},
              params.row.left_right_mode == 1
                ? "左式"
                : params.row.left_right_mode == 2
                ? "右式"
                : "无"
            );
          },
        },
        { title: "图号", key: "url_number", align: "center", minWidth: 100 },
        { title: "备注", key: "remark", align: "center", minWidth: 100 },
        {
          title: "状态",
          key: "status",
          align: "center",
          minWidth: 80,
          slot: "statusSlot",
        },
        {
          title: "操作",
          key: "remark",
          align: "center",
          width: "120",
          slot: "set",
        },
      ],
      area_no_list: [],
      area_title_list: [],
      product_title_list: [],
      url_number_list: [],
      oa_id: this.$route.query.oa_id || "",
    };
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    //2编辑 3详情 4变更 5变更记录
    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("/api/material_combination").then((res) => {
      this.combineList = res.data.data;
    });
    // 获取紧急程度
    this.axios.get("/api/warning_list").then((res) => {
      this.warningList = res.data.data;
    });
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    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.axios("/api/basics_measure_index").then((res) => {
      this.measureList = res.data.data;
    });
    this.initData(this.formData.order_no, this.tempPDTIndex, this.oa_id);
  },
  methods: {
    handleSelection(selection) {
      this.selected = selection;
    },
    getListData() {
      this.axios
        .get("/api/order_area_detail_list", {
          params: {
            order_no: this.$route.query.order_no,
            ...this.searchData,
            type: 2,
            oa_id: this.oa_id,
          },
        })
        .then((res) => {
          this.listTableData = res.data.data;
          this.area_no_list = res.data.area_no;
          this.area_title_list = res.data.area_title;
          this.product_title_list = res.data.product_title;
          this.url_number_list = res.data.url_number;
          this.listTableData.map((item) => {
            !item.url && (item.url = []);
            res.data.imgs.map((element) => {
              if (item.sign_id == element.sign_id) {
                item.url.push({ img_url: element.img_url });
              }
            });
          });
          this.total = res.data.total;
          this.$forceUpdate();
        });
    },
    handleCurTabChange(name) {
      this.currencyTab = name;
      this.selected = [];
      if (name == "name2" && this.listTableData.length < 1) {
        this.getListData();
      }
    },
    handleFinish(status) {
      if (this.selected.length < 1) {
        this.$Message.warning("请选择数据");
      } else {
        const order_area_product_id = this.selected.map(
          (item) => item.order_area_product_id || item.id
        );
        this.$Modal.confirm({
          title: "提示",
          content: "完成后不可编辑,是否确认完成?",
          onOk: () => {
            this.axios({
              method: "post",
              url: "/api/order_area_product_status",
              data: {
                status,
                order_area_product_id,
              },
            }).then((res) => {
              if (res.code == 200) {
                this.getListData();
                this.$Message.success(res.msg);
                this.initData(
                  this.formData.order_no,
                  this.tempPDTIndex,
                  this.oa_id
                );
              }
            });
          },
          onCancel: () => {},
        });
      }
    },
    changePage(e) {
      this.page_index = e;
      this.getListData();
    },
    changeSize(e) {
      this.page_size = e;
      this.getListData();
    },
    async handleBeforeUpload(row) {
      // row.name
      console.log("row :>> ", row);
      this.uploadData.title = row.name.substring(0, row.name.indexOf("."));
      return true;
    },
    onProgress(e) {
      console.log(e);
    },
    initData(order_no, curIndex, oa_id) {
      this.axios({
        method: "get",
        url: "/api/order_area_list",
        params: {
          order_no,
          type: 2,
          oa_id,
        },
      }).then((res) => {
        this.formData = res.data;
        this.supTableData = res.data.ext;
        // 产品特殊字段→ 弹窗窗口，table表头
        let arr = [];
        res.data.head[3] &&
          res.data.head[3].length > 0 &&
          res.data.head[3].forEach((item) => {
            arr.push({
              title: item.key,
              key: item.key,
              align: "center",
              minWidth: 80,
            });
          });
        this.tableColumns = [
          { type: "selection", align: "center", minWidth: 60 },
          { title: "序号", key: "index", align: "center", minWidth: 80 },
          {
            title: "产品名称",
            key: "title",
            align: "center",
            tooltip: true,
            minWidth: 100,
          },
          { title: "数量", key: "num", align: "center", minWidth: 80 },
          // { title: "价格", key: "price", align: "center", minWidth: 80 },
          {
            title: "规格",
            key: "measure",
            align: "center",
            tooltip: true,
            minWidth: 140,
          },
          {
            title: "工艺属性",
            key: "process_property",
            align: "center",
            tooltip: true,
            minWidth: 120,
          },
          {
            title: "图纸",
            align: "center",
            key: "url",
            minWidth: 100,
            render: (h, params) => {
              const { row } = params;
              let url = row.url ? row.url : [];
              return h("img", {
                attrs: {
                  src: this.$store.state.ip + url[0],
                  style:
                    "max-width:50px;max-height:50px;position:relative;top:3px;",
                },
                on: {
                  click: (e) => {
                    // this.axios('/api/orders_img', { params: { id: row.id, type: 1 } }).then(res => {
                    // row.imgs = res.data
                    let list = [];
                    row.url.forEach((el) => {
                      list.push({ img_url: el });
                    });
                    this.$previewImg({
                      list,
                      baseUrl: this.$store.state.ip,
                      baseImgField: "img_url",
                      baseTitleField: "",
                    });
                    // })
                  },
                },
              });
            },
          },
          {
            title: "左右式",
            key: "left_right_mode",
            align: "center",
            tooltip: true,
            minWidth: 80,
            render: (h, params) => {
              return h(
                "span",
                {},
                params.row.left_right_mode == 1
                  ? "左式"
                  : params.row.left_right_mode == 2
                  ? "右式"
                  : "无"
              );
            },
          },
          {
            title: "图号",
            key: "url_number",
            align: "center",
            tooltip: true,
            minWidth: 80,
          },
          ...arr,
          { title: "备注", key: "remark", align: "center", minWidth: 80 },
          {
            title: "状态",
            key: "status",
            align: "center",
            minWidth: 80,
            slot: "statusSlot",
          },
          {
            title: "操作",
            key: "remark",
            align: "center",
            slot: "set",
            minWidth: 160,
          },
        ];
        // 订单特殊字段
        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);
                }
              });
            });
          element.isCurrencyArea = false;
          // if (index == curIndex) {
          //   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:2
          //         },
          //       })
          //       .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]
          : [];
      });
    },
    goback() {
      this.$router.go(-1);
    },
    postData() {
      let 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: 2,
          // 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,
              })
              .then((re) => {
                if (re.code == 200) {
                  this.$Message.success(re.msg);
                  this.goback();
                }
              });
          }
        });
      this.axios({
        method: "post",
        url: "/api/order_area_product_save",
        data: {
          order_no: this.formData.order_no,
          order_area_id: "",
          order_area_product_id: "",
          list: "",
        },
      }).then((res) => {
        this.$Message.success(res.msg);
      });
    },
    handleAddPDT(row, index) {
      this.order_area_id = row.id;
      this.showPDTModal = true;
      this.tempPDTIndex = index;
      // this.tempPDTList = row
    },
    handlechange(val) {
      console.log("val :>> ", val);
    },
    handleHiddenCurrencyArea(item, index) {
      item.isCurrencyArea = false;
      this.$forceUpdate();
    },
    // 展示区域产品
    handleShowCurrencyArea(item, index) {
      const preObj = this.formData.list.filter((item) => item.isCurrencyArea);
      // 判断当前打开是否与上一个是否一致
      if (preObj && preObj.length > 0 && 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: 2,
          })
          .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,
                    oa_id: this.$route.query.oa_id,
                    area_id: item.id,
                    type: 2,
                  },
                })
                .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 {
        this.formData.list.map((item) => (item.isCurrencyArea = false));
        item.isCurrencyArea = true;
        this.axios
          .get("/api/order_area_list_product", {
            params: {
              order_no: this.$route.query.order_no,
              oa_id: this.$route.query.oa_id,
              area_id: item.id,
              type: 2,
            },
          })
          .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();
            }
          });
      }
    },
    // 1深化 2详情
    handleSet(row, index, type, item) {
      switch (type) {
        case 1:
        case 2:
          this.$router.push({
            path: "/cms/BidSystem/DeepeningOrder/edit",
            query: {
              type,
              order_no: this.formData.order_no,
              order_area_id: item.id,
              order_area_product_id: row.id
                ? row.id
                : row.order_area_product_id,
            },
          });
          break;
        case 3:
          this.$Modal.confirm({
            title: "确认删除？",
            content: "此操作确认后不可恢复，请确认！",
            onOk: () => {
              this.axios({
                method: "post",
                url: "/api/order_deep_product_del",
                data: {
                  order_area_product_id: row.id,
                },
              }).then((res) => {
                if (res.code == 200) {
                  this.$Message.success(res.msg);
                  this.initData(
                    this.formData.order_no,
                    this.tempPDTIndex,
                    this.oa_id
                  );
                }
              });
            },
            onCancel: () => {},
          });
          break;
      }
    },
    // 删除工艺属性
    handleAddPDTDetailDele(arr, index) {
      arr.splice(index, 1);
    },
    //新增产品复制
    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.measure = `${element.length ? element.length : 0}*${element.width ? element.width : 0}*${element.height ? element.height : 0}`
        element.addPDTProcessAttrList.forEach((el, i) => {
          if (i == element.tempMeasureList.length - 1) {
            element.process_property += el.showValue;
            element.process_properties += el.showId;
          } else {
            element.process_property += el.showValue + ",";
            element.process_properties += el.showId + ",";
          }
        });
        element.tempMeasureList.forEach((el) => {
          element[el.e_title] = el.value;
          el.value &&
            (element.measure += `${el.e_title ? el.e_title : 0}${
              element[el.e_title]
            }*`);
        });
        element.measure = element.measure.substring(
          0,
          element.measure.length - 1
        );
      });
      // this.formData.list[this.tempPDTIndex].product.push(...this.tempPDTList)
      // //开辟新栈空间，更改指针
      // this.formData.list = JSON.parse(JSON.stringify(this.formData.list))
      // this.formData.list[this.tempPDTIndex].product.forEach((el, index) => {
      //   el.index = index + 1
      // });
      this.axios({
        method: "post",
        url: "/api/order_area_deep_add",
        data: {
          order_no: this.formData.order_no,
          oa_id: this.$route.query.oa_id,
          order_area_id: this.order_area_id,
          ...this.tempPDTList[0],
        },
      }).then((res) => {
        this.$Message.success(res.msg);
        this.showPDTModal = false;
        this.initData(this.formData.order_no, this.tempPDTIndex, this.oa_id);
      });
      // this.tempPDTList = [
      //   {
      //     addPDTProcessAttrList:[{}]
      //   }
      // ]
    },
    //项目辅料新增
    handleAddSup() {
      this.supTableData.push({ id: "" });
    },
    //项目辅料删除
    handleSupSet(row, index) {
      this.supTableData.splice(index, 1);
    },
    //添加工艺属性
    handleProcessAdd(item, index) {
      this.tempPDTList[index].addPDTProcessAttrList.push({
        PDTProcessAttrDetailList: [],
      });
    },
    //选择工艺属性
    handleAddPDTAttrChange(item, index, 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;
    },
    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) => {
        row.push(res.data.url);
      });
    },
    // 产品分类选择→对应不同测量字段
    hanndleAddPDTTypeChange(item, e) {
      e &&
        this.axios("/api/basics_product_detail", {
          params: { id: e },
        }).then((res) => {
          if (res.code == 200) {
            if (res.data.measure_id.length > 0) {
              item.tempPDTTypeList = res.data.measure_id;
              item.tempMeasureList = JSON.parse(
                JSON.stringify(this.measureList)
              );
              this.measureList.forEach((el) => {
                item[el.e_title] = "";
              });
            } else {
              item.tempPDTTypeList = [];
              item.tempMeasureList = [];
            }
          }
        });
      // basics_measure_index
    },
    handleImgClick(e, row) {
      const list = [{ img_url: e.target.src }];
      this.$previewImg({
        list,
        baseUrl: "",
        baseImgField: "img_url",
        baseTitleField: "",
      });
    },
    uploadError(err) {
      this.$Message.error(err.msg || "上传失败");
    },
    //导入成功
    uploadSuccess(res) {
      if (res.code == 200) {
        this.$Message.success(res.msg || "上传成功");
        // const temp = res.data;
        // let list = [...this.postInfo.children, ...temp];
      } else {
        this.$Message.warning(res.msg || "上传失败");
      }
    },
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="scss" scoped>
.BidSystemDeepeningOrderDetail {
  overflow: hidden;
  overflow-y: auto;
  position: relative;
  top: 20px;
  height: 85%;
  padding-bottom: 20px;
  .top_search_name1 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    padding: 10px 0;
    font-size: 14px;
    div {
      width: 220px;
      padding: 5px;
      span {
        display: inline-block;
        min-width: 40px;
        max-width: 150px;
        text-align: justify;
        text-justify: newspaper;
        word-break: break-all;
        vertical-align: middle;
      }
    }
    .top_search_content {
      display: flex;
      justify-content: space-between;
    }
    .top_search_form {
      /deep/ .ivu-form-item {
        display: inline-block;
        width: 300px;
      }
    }
  }
  .top_search {
    padding: 20px 0;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    padding: 10px 0;
    font-size: 14px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    padding: 10px 0;
    font-size: 14px;
    .top_search_form {
      // width: 800px;
      // display: flex;
      // justify-content: space-around;
      /deep/ .ivu-form-item {
        display: inline-block;
        width: 300px;
      }
    }
  }
  .addAreaForm {
    font-size: 14px;
    .addFormInfo {
      width: 80%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      padding: 10px 0;
      div {
        width: 200px;
        padding: 10px;
      }
    }
  }
  .table-data {
    position: relative;
    padding: 15px;
    margin: 0 10px;
    margin-bottom: 30px;
    border-radius: 5px;
    box-shadow: 1px 1px 5px 1px #999;
    .addBtn {
      position: absolute;
      right: 20px;
      top: 20px;
    }
    /deep/ .ivu-form-item {
      display: inline-block;
      width: 220px;
    }
  }
}
.addPDTFormModal {
  /deep/ .ivu-modal-body {
    overflow: hidden;
    overflow-y: auto;
  }
}
.addPDTForm {
  position: relative;
  border-bottom: 1px solid #e8eaec;
  // padding-bottom: 30px;
  /deep/ .ivu-form-item {
    display: inline-block;
    width: 300px;
  }
  .addPDTBtn {
    position: absolute;
    right: 10px;
    bottom: 25px;
  }
}
.addPDTProcess {
  width: 300px;
  padding-bottom: 15px;
  div {
    display: flex;
    justify-content: space-around;
    padding: 5px 0;
    span {
      padding-top: 6px;
    }
  }
}
.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;
    }
  }
}
.footer-center {
  display: flex;
  justify-content: center;
  padding: 10px 0;
}
.supModalBtn {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
.urlSetStyle {
  img {
    max-width: 100px;
  }
}
/deep/ .ivu-table-wrapper {
  overflow: visible;
} //穿透iview
/deep/.ivu-tabs-nav-scroll {
  display: flex;
  justify-content: center;
}
/deep/.el-input--small .el-input__inner {
  height: 24px;
  line-height: 24px;
}
</style>