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

<template>
  <div class="BidSystemContractInfo">
    <Toptitle title="查看工装订单">
      <slot name="titleButton">
        <!-- <Button
          type="primary"
          style="margin-right: 10px"
          :disabled="isChecked"
          @click="showAddInputModal = true"
        >
          添加特殊字段
        </Button> -->
        <Button
          @click="handleOpenModal"
          type="primary"
          v-show="currencyTab == 'name2'"
          style="margin-right: 10px"
          >批量下深化</Button
        >
        <Button
          @click="showSupModal = true"
          type="primary"
          style="margin-right: 10px"
          >项目辅料</Button
        >
        <Button
          @click="goback()"
          type="primary"
          ghost
          style="margin-right: 10px"
          >返回</Button
        >
      </slot>
    </Toptitle>
    <Tabs value="name1" @on-click="handleCurTabChange">
      <TabPane
        label="块状形式"
        name="name1"
        style="overflow: hidden; overflow-y: auto"
      >
        <div class="top_search">
          <Form :model="formData" :label-width="100" class="top_search_form">
            <FormItem label="订单号:">
              {{ formData.order_no }}
            </FormItem>
            <FormItem label="项目名称:">
              {{ formData.residential_name }}
            </FormItem>
            <FormItem label="客户姓名:">
              {{ formData.client_name }}
            </FormItem>
            <FormItem label="紧急程度:">
              <span
                v-for="_item in warningList"
                :key="_item.id"
                v-show="_item.id == formData.warning_state"
                :style="{ color: _item.color }"
                >{{ _item.title }}
              </span>
            </FormItem>
            <FormItem label="项目定金:">
              {{ formData.front_money }}
              <!-- <RadioGroup v-model="formData.pay_state"
                      size="small">
            <Radio :label=0
                   :disabled="isChecked">未收款</Radio>
            <Radio :label=1
                   :disabled="isChecked">已收款</Radio>
          </RadioGroup> -->
            </FormItem>
            <FormItem label="详细地址:">
              {{ formData.address }}
            </FormItem>
            <FormItem label="手机号:">
              {{ formData.mobile }}
            </FormItem>
            <FormItem label="开始日期:">
              {{
                formData.start_time
                  ? func.replaceDateNoHMS(formData.start_time)
                  : ""
              }}
            </FormItem>
            <FormItem label="结束日期:">
              {{
                formData.end_time
                  ? func.replaceDateNoHMS(formData.end_time)
                  : ""
              }}
            </FormItem>
            <FormItem label="业务员:">
              <span
                v-for="_item in salesmanList"
                :key="_item.id"
                v-show="_item.id == formData.salesman"
                :style="{ color: _item.color }"
                >{{ _item.nickname }}
              </span>
            </FormItem>
            <!-- <FormItem label="订单类型:">
          <Select v-model="formData.type"
                  :disabled="isChecked"
                  size="small"
                  style="width:200px">
            <Option label='工装'
                    :value=1></Option>
            <Option label='家装'
                    :value=2></Option>
          </Select>
        </FormItem> -->
            <FormItem
              v-for="item in formData.special"
              :key="item.id"
              :label="item.key + ':'"
            >
              {{ item.value }}
            </FormItem>
            <FormItem label="备注:">
              {{ formData.remark }}
            </FormItem>
          </Form>
        </div>
        <div
          class="addArea"
          v-for="(areaItem, areaIndex) in formData.list"
          :key="areaItem.areaIndex"
        >
          <div class="addAreaBtn">
            <Button
              @click="handleShowCurrencyArea(areaItem, areaIndex)"
              ghost
              size="small"
              type="primary"
              >展示产品</Button
            >
          </div>
          <div class="addAreaForm">
            <Form :label-width="100" :model="areaItem" style="width: 60%">
              <FormItem label="区域编码:">
                {{ areaItem.num }}
              </FormItem>
              <FormItem label="区域名称:">
                {{ areaItem.title }}
              </FormItem>
              <FormItem label="单位:">
                {{ areaItem.unit }}
              </FormItem>
              <FormItem label="工程量:">
                {{ areaItem.quantity }}
              </FormItem>
              <FormItem label="户型:">
                {{ areaItem.house_type }}
              </FormItem>
              <FormItem
                v-for="item in areaItem.special"
                :key="item.id"
                :label="item.key + ':'"
              >
                {{ item.value }}
              </FormItem>
              <FormItem label="备注:">
                {{ areaItem.remark }}
              </FormItem>
            </Form>
          </div>
          <div class="addAreaTable">
            <Table
              :columns="tableColumns"
              :data="areaItem.product"
              max-height="600"
              border
            >
            </Table>
          </div>
        </div>
        <li v-show="false" v-for="item in formData.list" :key="item.id"></li>
      </TabPane>
      <TabPane
        label="列表形式"
        name="name2"
        style="overflow: hidden; overflow-y: auto"
      >
        <div class="top_search">
          <Form :model="formData" :label-width="100" class="top_search_form">
            <FormItem label="订单号:">
              {{ formData.order_no }}
            </FormItem>
            <FormItem label="项目名称:">
              {{ formData.residential_name }}
            </FormItem>
            <FormItem label="客户姓名:">
              {{ formData.client_name }}
            </FormItem>
            <FormItem label="紧急程度:">
              <span
                v-for="_item in warningList"
                :key="_item.id"
                v-show="_item.id == formData.warning_state"
                :style="{ color: _item.color }"
                >{{ _item.title }}
              </span>
            </FormItem>
            <FormItem label="项目定金:">
              {{ formData.front_money }}
              <!-- <RadioGroup v-model="formData.pay_state"
                      size="small">
            <Radio :label=0
                   :disabled="isChecked">未收款</Radio>
            <Radio :label=1
                   :disabled="isChecked">已收款</Radio>
          </RadioGroup> -->
            </FormItem>
            <FormItem label="详细地址:">
              {{ formData.address }}
            </FormItem>
            <FormItem label="手机号:">
              {{ formData.mobile }}
            </FormItem>
            <FormItem label="开始日期:">
              {{
                formData.start_time
                  ? func.replaceDateNoHMS(formData.start_time)
                  : ""
              }}
            </FormItem>
            <FormItem label="结束日期:">
              {{
                formData.end_time
                  ? func.replaceDateNoHMS(formData.end_time)
                  : ""
              }}
            </FormItem>
            <FormItem label="业务员:">
              <span
                v-for="_item in salesmanList"
                :key="_item.id"
                v-show="_item.id == formData.salesman"
                :style="{ color: _item.color }"
                >{{ _item.nickname }}
              </span>
            </FormItem>
            <!-- <FormItem label="订单类型:">
          <Select v-model="formData.type"
                  :disabled="isChecked"
                  size="small"
                  style="width:200px">
            <Option label='工装'
                    :value=1></Option>
            <Option label='家装'
                    :value=2></Option>
          </Select>
        </FormItem> -->
            <FormItem
              v-for="item in formData.special"
              :key="item.id"
              :label="item.key + ':'"
            >
              {{ item.value }}
            </FormItem>
            <FormItem label="备注:">
              {{ formData.remark }}
            </FormItem>
          </Form>
        </div>
        <div>
          <Table
            :columns="listTableColumns"
            :data="listTableData"
            @on-selection-change="handleSelection"
            :max-height="500"
            border
          >
          </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>
        <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="showPDTEditModal"
      :mask-closable="false"
      class="addPDTFormModal"
      :width="1000"
    >
      <div class="modal-footer" slot="footer"></div>
    </Modal>
    <!-- 特殊字段弹窗 -->
    <Modal
      title="特殊字段"
      v-model="showAddInputModal"
      :mask-closable="false"
      class="addInputClassModal"
      :width="600"
    >
      <div class="addInputClass">
        <Tabs value="name1">
          <TabPane label="订单特殊字段" name="name1">
            <div style="display: flex; justify-content: center">
              <span
                class="dele_icon"
                @click="handleSpecValueAdd('', 1)"
                style="text-align: center; width: 50px"
                >添加
              </span>
            </div>
            <div class="addInputClassTab">
              <div v-for="(item, index) in contactSpecValueList" :key="index">
                <span>特殊字段名:</span>
                <Input
                  type="text"
                  size="small"
                  v-model="item.key"
                  placeholder="请输入"
                  style="width: 120px"
                />
                <span class="dele_icon" style="margin-right: 5px">
                  <Icon type="md-add" @click="handleSpecValueAdd(item, 1)" />
                </span>
                <span class="dele_icon">
                  <Icon
                    type="md-remove"
                    @click="handleSpecValueDele(index, 1)"
                  />
                </span>
              </div>
            </div>
          </TabPane>
          <TabPane label="区域特殊字段" name="name2">
            <div style="display: flex; justify-content: center">
              <span
                class="dele_icon"
                @click="handleSpecValueAdd('', 2)"
                style="text-align: center; width: 50px"
                >添加
              </span>
            </div>
            <div class="addInputClassTab">
              <div v-for="(item, index) in areaSpecValueList" :key="index">
                <span>特殊字段名:</span>
                <Input
                  type="text"
                  size="small"
                  v-model="item.key"
                  placeholder="请输入"
                  style="width: 120px"
                />
                <span class="dele_icon" style="margin-right: 5px">
                  <Icon type="md-add" @click="handleSpecValueAdd(item, 2)" />
                </span>
                <span class="dele_icon">
                  <Icon
                    type="md-remove"
                    @click="handleSpecValueDele(index, 2)"
                  />
                </span>
              </div>
            </div>
          </TabPane>
          <TabPane label="产品特殊字段" name="name3">
            <div style="display: flex; justify-content: center">
              <span
                class="dele_icon"
                @click="handleSpecValueAdd('', 3)"
                style="text-align: center; width: 50px"
                >添加
              </span>
            </div>
            <div class="addInputClassTab">
              <div v-for="(item, index) in productSpecValueList" :key="index">
                <span>特殊字段名:</span>
                <Input
                  type="text"
                  size="small"
                  v-model="item.key"
                  placeholder="请输入"
                  style="width: 120px"
                />
                <span class="dele_icon" style="margin-right: 5px">
                  <Icon type="md-add" @click="handleSpecValueAdd(item, 3)" />
                </span>
                <span class="dele_icon">
                  <Icon
                    type="md-remove"
                    @click="handleSpecValueDele(index, 3)"
                  />
                </span>
              </div>
            </div>
          </TabPane>
        </Tabs>
        <!-- <Form :label-width="100">
          <FormItem label="请输入字段名:">
            <Input type="text"
                   size="small"
                   v-model="addInputName"
                   placeholder="请输入"
                   style="width: 200px" />
          </FormItem>
        </Form> -->
      </div>
      <div class="modal-footer" slot="footer">
        <Button @click="showAddInputModal = false">取消</Button>
        <Button type="primary" @click="handleAddInputConfirm">确认</Button>
      </div>
    </Modal>
    <!-- 批量下深化 -->
    <Modal
      v-model="processModal"
      title="下深化"
      @on-ok="handleProcess"
      @on-cancel="processModal = false"
    >
      <div>
        <div class="process_modal">
          <span>深化人员:</span>
          <Select v-model="process_man" style="width: 150px">
            <Option
              v-for="item in processManList"
              :key="item.id"
              :label="item.nickname"
              :value="item.id"
            ></Option>
          </Select>
        </div>
        <div class="process_modal">
          <span>选择时间:</span>
          <DatePicker
            type="date"
            v-model="process_start_time"
            placeholder="年/月/日"
            style="width: 150px"
          ></DatePicker>
          至
          <DatePicker
            type="date"
            v-model="process_end_time"
            placeholder="年/月/日"
            style="width: 150px"
          ></DatePicker>
        </div>
      </div>
    </Modal>
  </div>
</template>

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

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

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