zhonghan2.0/src/views/BusinessManagement/Construction/detail.vue

<template>
  <div>
    <Toptitle>
      <template #right>
        <span v-show="oa_state === 0" style="color:#22a92c;height: 30px;line-height: 30px;margin-right: 10px;font-size: 16px;cursor: pointer" @click="handleShowCheckMan">审核中...</span>
        <Button
          type="primary"
          ghost
          @click="handleSave"
          v-show="type != 3 && !formData.status"
          style="margin-right: 10px"
          >保存</Button
        >
        <Button style="margin-right:10px" type="warning" ghost @click="handleCheck(1)" v-show="type != 1&& formData.status==2"
        >弃审红冲</Button
        >
        <Button style="margin-right:10px" type="primary" @click="handleCheck(0)" v-show="type != 1&& formData.status<=0"
          >审核</Button
        >
        <Button
            type="primary"
            ghost
            @click="is_show = true"
            style="margin-right: 10px"
            v-show="type != 3 && !formData.status"
        >新增车主信息</Button
        >
        <Button style="margin-right: 10px" type="success" ghost v-show="type != 1&&oa_state==1&& formData.status==1" @click="handlePassModal(1)">通过</Button>
        <Button style="margin-right: 10px" type="error" ghost v-show="type != 1&&oa_state==1&& formData.status==1" @click="handlePassModal(0)">驳回</Button>
        <Button style="margin-right: 10px" type="warning" v-show="type != 1&&oa_state==1&& formData.status==1" @click="handlePassModalOther">转签</Button>
        <Button type="warning" ghost v-show="type != 1 && formData.status==1" @click="handleOaModal">审核详情</Button>
      </template>
    </Toptitle>
    <div class="content">
      <div class="content_title">施工单</div>

      <Form :label-width="100" class="form">
        <FormItem label="施工单号" class="item">
          <Input
            disabled
            placeholder="自动带出"
            clearable
            v-model="formData.order_number"
          />
        </FormItem>
        <!-- <FormItem label="原施工单号" class="item"></FormItem> -->
        <FormItem label="施工日期" class="item">
          <DatePicker
            type="date"
            placeholder="年/月/日"
            style="width: 100%"
            v-model="formData.construction_time"
          ></DatePicker>
        </FormItem>
        <FormItem label="施工技师" class="item">
          <Select
            transfer
            clearable
            filterable
            v-model="formData.construction_person"
            :disabled="formData.four_shop_id ? false : true"
          >
            <Option
              v-for="item in constructionPersonList"
              :key="item.id"
              :value="item.id"
              :label="item.title"
              :disabled="item.disable"
            />
          </Select>
        </FormItem>
        <FormItem label="4s店名称" class="item">
          <Select
            transfer
            filterable
            clearable
            v-model="formData.four_shop_id"
            @on-change="handleSelectFourShop"
          >
            <Option
              v-for="item in fourShopList"
              :key="item.id"
              :value="item.id"
              :label="item.title"
            />
          </Select>
        </FormItem>
        <FormItem label="所属仓库" class="item">
          <Select
            transfer
            filterable
            clearable
            disabled
            placeholder="自动带出"
            v-model="formData.storehouse_id"
          >
            <Option
              v-for="item in storehouseList"
              :key="item.id"
              :value="item.id"
              :label="item.title"
            />
          </Select>
        </FormItem>
        <FormItem label="所属集团" class="item">
          <Select
            transfer
            filterable
            clearable
            disabled
            placeholder="自动带出"
            v-model="formData.company_id"
          >
            <Option
              v-for="item in companyList"
              :key="item.id"
              :value="item.id"
              :label="item.title"
            />
          </Select>
        </FormItem>
        <FormItem label="所属区域" class="item">
          <Select
            transfer
            filterable
            clearable
            disabled
            placeholder="自动带出"
            v-model="formData.area"
          >
            <Option
              v-for="item in areaList"
              :key="item.id"
              :value="item.id"
              :label="item.title"
            />
          </Select>
        </FormItem>
        <FormItem label="区域经理" class="item">
          <Select
            transfer
            filterable
            clearable
            disabled
            placeholder="自动带出"
            v-model="formData.regional_manager"
          >
            <Option
              v-for="item in employeeList"
              :key="item.id"
              :value="item.id"
              :label="item.emp_name"
            />
          </Select>
        </FormItem>
        <FormItem label="联系人" class="item">
          <Input
            v-model="formData.contract_person"
            clearable
            disabled
            placeholder="自动带出"
          />
        </FormItem>
        <FormItem label="联系方式" class="item">
          <Input
            v-model="formData.contract_phone"
            clearable
            disabled
            placeholder="自动带出"
          />
        </FormItem>
        <FormItem label="4s店地址" class="item">
          <Input
            v-model="formData.address"
            clearable
            disabled
            placeholder="自动带出"
          />
        </FormItem>
        <FormItem label="施工产品类型" class="item">
          <Select
            transfer
            filterable
            clearable
            v-model="formData.basic_type_item_id"
            @on-change="handleChangeBasicType"
          >
            <Option
              v-for="item in workProductList"
              :key="item.id"
              :value="item.id"
              :label="item.title"
            />
          </Select>
        </FormItem>
        <FormItem label="业务类型" class="item">
          <Select
            transfer
            clearable
            :disabled="formData.status>0"
            v-model="formData.basic_type_bussiness_id"
            @on-change="handleSelectBID"
          >
            <Option
              v-for="item in workList"
              :key="item.id"
              :value="item.id"
              :label="item.title"
            />
          </Select>
        </FormItem>
        <FormItem label="特殊情况" class="item">
          <Select
            transfer
            filterable
            clearable
            v-model="formData.basic_type_special_id"
          >
            <Option
              v-for="item in specialList"
              :key="item.id"
              :value="item.id"
              :label="item.title"
            />
          </Select>
        </FormItem>
        <FormItem label="车架号" class="item">
          <Input v-model="formData.vin_no" readonly placeholder="请选择">
            <template slot="suffix">
              <a style="width: 30px;position: relative;right: 4px;top: 6px;display: inline-block" @click="handleChooseVin">选择</a>
            </template>
          </Input>
<!--          <Select-->
<!--            transfer-->
<!--            filterable-->
<!--            clearable-->
<!--            v-model="formData.vin_no"-->
<!--            @on-change="handleSelectVin"-->
<!--            allow-create-->
<!--            @on-create="handleCreateVin"-->
<!--          >-->
<!--            <Option-->
<!--              v-for="(item, index) in ownerList"-->
<!--              :key="index"-->
<!--              :value="item.vin_no"-->
<!--              :label="item.vin_no"-->
<!--            />-->
<!--          </Select>-->
        </FormItem>
        <FormItem label="车辆品牌" class="item">
          <Select
            transfer
            filterable
            clearable
            v-model="formData.car_type"
            :placeholder="formData.own_id === 0 ? '请选择' : '自动带出'"
            :disabled="formData.own_id === 0 ? false : true"
            @on-change="handleChangeCarType"
          >
            <Option
              v-for="item in carTypeList"
              :key="item.id"
              :value="item.id"
              :label="item.title"
            />
          </Select>
        </FormItem>
        <FormItem label="车辆型号" class="item">
          <Select
            transfer
            filterable
            clearable
            v-model="formData.car_file_id"
            :placeholder="formData.own_id === 0 ? '请选择' : '自动带出'"
            :disabled="formData.own_id === 0 ? false : true"
            @on-change="handleSelectCarFile"
          >
            <Option
              v-for="item in SureCarFilesList"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            />
          </Select>
        </FormItem>
        <FormItem label="是否大型车" class="item">
          <Input
            disabled
            placeholder="自动带出"
            :value="
              formData.is_big === 1 ? '是' : formData.is_big === 0 ? '否' : ''
            "
          />
        </FormItem>
        <FormItem label="车主姓名" class="item">
          <Select
            transfer
            filterable
            clearable
            v-model="formData.name_id"
            :disabled="!formData.vin_no"
            @on-change="handleSelectName"
            v-show="!is_create"
            filter-by-label
          >
            <Option
              v-for="item in nameList"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            />
          </Select>
          <Input
            clearable
            v-model="formData.own_name"
            v-show="is_create"
            placeholder="请输入"
          />
        </FormItem>
        <FormItem label="车主联系方式" class="item">
          <Select
            transfer
            filterable
            clearable
            v-model="formData.name_id"
            @on-change="handleSelectName"
            :disabled="!formData.vin_no"
            v-show="!is_create"
            filter-by-label
          >
            <Option
              v-for="item in nameList"
              :key="item.id"
              :value="item.id"
              :label="item.phone"
            >{{item.label}}</Option>
          </Select>
          <Input
            clearable
            v-model="formData.own_phone"
            v-show="is_create"
            placeholder="请输入"
          />
        </FormItem>
        <FormItem label="车表检查" class="item">
          <Select filterable clearable v-model="formData.surface" transfer>
            <Option :value="1" label="完好" />
            <Option :value="2" label="划痕" />
          </Select>
        </FormItem>
        <FormItem label="内饰检查" class="item">
          <Select filterable clearable v-model="formData.inside" transfer>
            <Option :value="1" label="完好" />
            <Option :value="2" label="划痕" />
          </Select>
        </FormItem>
      </Form>
      <div class="bdy">
        <div class="title">施工单明细</div>
        <div v-for="(ele, index) in formData.sub" :key="index">
          <Form :label-width="100" class="form">
            <FormItem label="套餐编码">
              <Select
                filterable
                clearable
                v-model="ele.roll_film_combine_id"
                style="width: 200px"
                :disabled="!formData.company_id || !formData.car_file_id"
                @on-change="
                  ($event) =>
                    is_ready ? handleSelectCombine($event, index) : ''
                "
              >
                <Option
                  v-for="item in SureRollFilmCombineList"
                  :key="item.id"
                  :value="item.id"
                  :label="item.code"
                />
              </Select>
            </FormItem>
            <FormItem label="套餐名称">
              <Select
                filterable
                clearable
                v-model="ele.roll_film_combine_id"
                style="width: 300px"
                :disabled="!formData.company_id || !formData.car_file_id"
                @on-change="
                  ($event) =>
                    is_ready ? handleSelectCombine($event, index) : ''
                "
              >
                <Option
                  v-for="item in SureRollFilmCombineList"
                  :key="item.id"
                  :disabled="item.roll_film_id ? false : true"
                  :value="item.id"
                  :label="item.title"
                />
              </Select>
            </FormItem>
            <FormItem label="数量">
              <Input
                v-model="ele.number"
                clearable
                placeholder="请输入"
                style="width: 200px"
              />
            </FormItem>
            <FormItem :label-width="10" v-show="formData.status <= 0">
              <Icon
                type="ios-add-circle-outline"
                size="25"
                style="margin-right: 10px"
                class="btn"
                @click="handleAddBox(index)"
              />
              <Icon
                type="ios-remove-circle-outline"
                size="25"
                style="margin-left: 10px"
                class="btn"
                @click="handleReduceBox(index)"
              />
            </FormItem>
          </Form>
          <vxe-grid
            v-bind="ele.gridOptions"
            :footer-method="footerMethod"
            show-footer
          >
            <template #set="{ rowIndex }">
              <Icon
                type="ios-add-circle-outline"
                style="margin-right: 30px"
                size="25"
                @click="handleAdd(rowIndex, index)"
              />
              <Icon
                size="25"
                type="ios-remove-circle-outline"
                @click="handleRemove(rowIndex, index)"
              />
            </template>
            <template #car_depart_name="{ row }">
              <Select
                filterable
                clearable
                v-model="row.car_depart_id"
                transfer
                @on-change="handleSelectCarDepart($event, row)"
              >
                <Option
                  v-for="item in carDepartList"
                  :key="item.id"
                  :value="item.id"
                  :label="item.title"
                />
              </Select>
            </template>
            <template #basic_roll_film_name="{ row }">
              <Select
                filterable
                clearable
                v-model="row.basic_roll_film_id"
                transfer
                @on-change="($event) => handleSelectBRF($event, row)"
              >
                <Option
                  v-for="item in basicRollFilmList"
                  :key="item.id"
                  :value="item.id"
                  :label="item.title"
                />
              </Select>
            </template>
            <template #roll_film_name="{ row }">
              <Select
                filterable
                clearable
                v-model="row.roll_film_id"
                transfer
                @on-change="handleSelectRollFilm($event, row)"
              >
                <Option
                  v-for="item in row.rollFilmList"
                  :key="item.id"
                  :value="item.id"
                  :label="item.title"
                />
              </Select>
            </template>
            <template #roll_film_number="{ row }">
              <Select
                filterable
                clearable
                v-model="row.roll_film_number"
                transfer
              >
                <Option
                  v-for="(item, index) in row.roll_film_number_arr"
                  :key="index"
                  :value="item.roll_film_number"
                  :label="item.roll_film_number"
                />
              </Select>
            </template>
          </vxe-grid>
        </div>
      </div>
      <div>
        <Form :label-width="130" class="form">
          <FormItem
            label="4s店派工单"
            v-show="formData.basic_type_item_id && img_type.indexOf('1') != -1"
          >
            <div class="total_img">
              <div
                  class="img_content"
                  v-for="(item, index) in imgData['1show']"
                  :key="index"
              >
                <viewer>
                  <img
                      :src="item"
                      alt=""
                  />
                </viewer>

                <Icon
                    v-show="type != 3"
                    size="20"
                    @click="imgData['1show'].splice(index, 1);imgData['1'].splice(index, 1)"
                    class="delete-img"
                    type="ios-close-circle"
                />
              </div>
              <Upload
                  multiple
                  :headers="headers"
                  :show-upload-list="false"
                  :max-size="3072"
                  :on-success="(res) => handleSuccess(res, '1')"
                  :before-upload="handleError"
                  :action="$store.state.ip + '/api/uploadConstructionFile'"
              >
                <div class="upd_file">
                  <Icon type="ios-cloud-upload-outline" class="ico" size="50" />
                </div>
              </Upload>
            </div>
          </FormItem>
          <FormItem
            label="车架号"
            v-show="formData.basic_type_item_id && img_type.indexOf('2') != -1"
          >
            <div class="total_img">
              <div v-show="imgData['2show']" class="img_content">
                <viewer :images="[imgData['2show']]">
                <img
                  :src="imgData['2show']"
                  alt=""
                />
                </viewer>
                <Icon
                  v-show="type != 3"
                  size="20"
                  @click="imgData['2'] = '';imgData['2show'] = ''"
                  class="delete-img"
                  type="ios-close-circle"
                />
              </div>
              <Upload
                multiple
                :headers="headers"
                v-show="!imgData['2']"
                :show-upload-list="false"
                :max-size="3072"
                :on-success="(res) => handleSuccess(res, '2')"
                :before-upload="handleError"
                :action="$store.state.ip + '/api/uploadConstructionFile'"
              >
                <div class="upd_file">
                  <Icon type="ios-cloud-upload-outline" class="ico" size="50" />
                </div>
              </Upload>
            </div>
          </FormItem>
          <FormItem
            label="卷膜号"
            v-show="formData.basic_type_item_id && img_type.indexOf('3') != -1"
          >
            <div class="total_img">
              <div
                class="img_content"
                v-for="(item, index) in imgData['3show']"
                :key="index"
              >
                <viewer>
                <img
                  :src="item"
                  alt=""
                />
                  </viewer>
                <Icon
                  v-show="type != 3"
                  size="20"
                  @click="imgData['3'].splice(index, 1);imgData['3show'].splice(index, 1)"
                  class="delete-img"
                  type="ios-close-circle"
                />
              </div>
              <Upload
                multiple
                :headers="headers"
                :show-upload-list="false"
                :max-size="3072"
                :on-success="(res) => handleSuccess(res, '3')"
                :before-upload="handleError"
                :action="$store.state.ip + '/api/uploadConstructionFile'"
              >
                <div class="upd_file">
                  <Icon type="ios-cloud-upload-outline" class="ico" size="50" />
                </div>
              </Upload>
            </div>
          </FormItem>
          <FormItem
            label="质保卡"
            v-show="formData.basic_type_item_id && img_type.indexOf('4') != -1"
          >
            <div class="total_img">
              <div v-show="imgData['4show']" class="img_content">
                <viewer :images="[imgData['4show']]">
                <img
                  :src="imgData['4show']"
                  alt=""
                />
                   </viewer>
                <Icon
                  v-show="type != 3"
                  size="20"
                  @click="imgData['4'] = '';imgData['4show'] = ''"
                  class="delete-img"
                  type="ios-close-circle"
                />
              </div>
              <Upload
                multiple
                :headers="headers"
                v-show="!imgData['4']"
                :show-upload-list="false"
                :max-size="3072"
                :on-success="(res) => handleSuccess(res, '4')"
                :before-upload="handleError"
                :action="$store.state.ip + '/api/uploadConstructionFile'"
              >
                <div class="upd_file">
                  <Icon type="ios-cloud-upload-outline" class="ico" size="50" />
                </div>
              </Upload>
            </div>
          </FormItem>
          <FormItem
            label="Logo"
            v-show="formData.basic_type_item_id && img_type.indexOf('5') != -1"
          >
            <div class="total_img">
              <div v-show="imgData['5']" class="img_content">
                <viewer :images="[imgData['5show']]">
                <img
                  :src="imgData['5show']"
                  alt=""
                />
                  </viewer>
                <Icon
                  v-show="type != 3"
                  size="20"
                  @click="imgData['5'] = '';imgData['5show'] = ''"
                  class="delete-img"
                  type="ios-close-circle"
                />
              </div>
              <Upload
                multiple
                :headers="headers"
                v-show="!imgData['5']"
                :show-upload-list="false"
                :max-size="3072"
                :on-success="(res) => handleSuccess(res, '5')"
                :before-upload="handleError"
                :action="$store.state.ip + '/api/uploadConstructionFile'"
              >
                <div class="upd_file">
                  <Icon type="ios-cloud-upload-outline" class="ico" size="50" />
                </div>
              </Upload>
            </div>
          </FormItem>
          <FormItem
            label="车辆保护套"
            v-show="formData.basic_type_item_id && img_type.indexOf('6') != -1"
          >
            <div class="total_img">
              <div v-show="imgData['6']" class="img_content">
                <viewer :images="[imgData['6show']]">
                <img
                  :src="imgData['6show']"
                  alt=""
                />
                  </viewer>
                <Icon
                  v-show="type != 3"
                  size="20"
                  @click="imgData['6'] = '';imgData['6show'] = ''"
                  class="delete-img"
                  type="ios-close-circle"
                />
              </div>
              <Upload
                multiple
                :headers="headers"
                v-show="!imgData['6']"
                :show-upload-list="false"
                :max-size="3072"
                :on-success="(res) => handleSuccess(res, '6')"
                :before-upload="handleError"
                :action="$store.state.ip + '/api/uploadConstructionFile'"
              >
                <div class="upd_file">
                  <Icon type="ios-cloud-upload-outline" class="ico" size="50" />
                </div>
              </Upload>
            </div>
          </FormItem>
          <FormItem
            label="工装"
            v-show="formData.basic_type_item_id && img_type.indexOf('7') != -1"
          >
            <div class="total_img">
              <div v-show="imgData['7']" class="img_content">
                <viewer :images="[imgData['7show']]">
                <img
                  :src="imgData['7show']"
                  alt=""
                />
                  </viewer>
                <Icon
                  v-show="type != 3"
                  size="20"
                  @click="imgData['7'] = '';imgData['7show'] = ''"
                  class="delete-img"
                  type="ios-close-circle"
                />
              </div>
              <Upload
                multiple
                :headers="headers"
                v-show="!imgData['7']"
                :show-upload-list="false"
                :max-size="3072"
                :on-success="(res) => handleSuccess(res, '7')"
                :before-upload="handleError"
                :action="$store.state.ip + '/api/uploadConstructionFile'"
              >
                <div class="upd_file">
                  <Icon type="ios-cloud-upload-outline" class="ico" size="50" />
                </div>
              </Upload>
            </div>
          </FormItem>
          <FormItem
            label="车内保护套"
            v-show="formData.basic_type_item_id && img_type.indexOf('8') != -1"
          >
            <div class="total_img">
              <div v-show="imgData['8']" class="img_content">
                <viewer :images="[imgData['8show']]">
                <img
                  :src="imgData['8show']"
                  alt=""
                />
                </viewer>
                <Icon
                  v-show="type != 3"
                  size="20"
                  @click="imgData['8'] = '';imgData['8show'] = ''"
                  class="delete-img"
                  type="ios-close-circle"
                />
              </div>
              <Upload
                multiple
                :headers="headers"
                v-show="!imgData['8']"
                :show-upload-list="false"
                :max-size="3072"
                :on-success="(res) => handleSuccess(res, '8')"
                :before-upload="handleError"
                :action="$store.state.ip + '/api/uploadConstructionFile'"
              >
                <div class="upd_file">
                  <Icon type="ios-cloud-upload-outline" class="ico" size="50" />
                </div>
              </Upload>
            </div>
          </FormItem>
          <FormItem label="情况说明" style="width: 100%">
            <Input
              clearable
              v-model="formData.mark"
              placeholder="请输入"
              type="textarea"
            />
          </FormItem>
          <!-- <FormItem label="技术主管" style="width: 33%">
            <Select clearable filterable transfer>
              <Option
                v-for="item in employeeList"
                :key="item.id"
                :value="item.id"
                :label="item.emp_name"
              />
            </Select>
          </FormItem>
          <FormItem label="技术主管审批意见" style="width: 33%">
            <Input clearable placeholder="请输入" />
          </FormItem>
          <FormItem label="技术主管审批日期" style="width: 33%">
            <DatePicker type="date" />
          </FormItem>
          <FormItem label="审核人" style="width: 33%">
            <Select clearable filterable transfer>
              <Option
                v-for="item in employeeList"
                :key="item.id"
                :value="item.id"
                :label="item.emp_name"
              />
            </Select>
          </FormItem>
          <FormItem label="审批意见" style="width: 33%">
            <Input clearable placeholder="请输入" />
          </FormItem>
          <FormItem label="审批日期" style="width: 33%">
            <DatePicker type="date" />
          </FormItem> -->
        </Form>
      </div>
    </div>
    <Modal v-model="is_oa" width="300" title="原因" :closable="false" :mask-closable="false" :draggable="true">
      <Form>
        <FormItem :label-width="60" label="原因">
          <Input clearable v-model="oa_remark" placeholder="请输入"/>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="is_oa = false" style="margin-right: 10px">取消</Button>
        <Button type="primary" ghost @click="handlePass">确认</Button>
      </div>
    </Modal>
    <Modal v-model="is_other" width="30" title="转签" :closable="false" :mask-closable="false" :draggable="true">
      <Form>
        <FormItem :label-width="80" label="转签人:">
         <Select v-model="employee_id" transfer clearable filterable>
           <Option v-for="item in employeeList" :key="item.id" :label="item.emp_name" :value="item.id"/>
         </Select>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="is_other = false" style="margin-right: 10px">取消</Button>
        <Button type="primary" ghost @click="handlePassOver">确认</Button>
      </div>
    </Modal>
    <Modal v-model="is_oaDetail" width="1000" title="审核详情" :closable="false" :mask-closable="false" :draggable="true">
      <Steps :current="current">
        <Step v-for="(item,index) in stepList" :key="index" :title="item.state==0?'待审核':item.state==1?'审核通过':'审核驳回'">
          <div slot="content">
            <div>班组：{{item.team}}</div>
            <div>备注：{{item.remark}}</div>
          </div>
        </Step>
      </Steps>
      <vxe-grid
          v-bind="oaGridOptions"
      >
        <template #crt_time="{row}">
          <span>{{func.replaceDateNoHMS(row.crt_time)}}</span>
        </template>
        <template #state="{row}">
          <span>{{row.state==0?'未审核':row.state==1?'审核通过':'审核驳回'}}</span>
        </template>
      </vxe-grid>
      <div slot="footer">
        <Button @click="is_oaDetail = false" style="margin-right: 10px">取消</Button>
      </div>
    </Modal>
    <Modal v-model="is_check" width="800" title="审核人员详情" :closable="false" :mask-closable="false" :draggable="true">
      <div style="height: 500px">
        <vxe-grid
            v-bind="oaCheckGridOptions"
        >
      </vxe-grid>
      </div>
      <div slot="footer">
        <Button @click="is_check = false" style="margin-right: 10px">取消</Button>
      </div>
    </Modal>
    <Modal
        draggable
        title="新增车主信息"
        :closable="false"
        :mask-closable="false"
        width="500"
        v-model="is_show"
    >
      <Form :label-width="120">
        <FormItem label="车主姓名：">
          <Input clearable v-model="modalData.name" />
        </FormItem>
        <FormItem label="车主联系方式：">
          <Input clearable v-model="modalData.phone" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button style="margin-right: 10px" @click="handleCancel">取消</Button>
        <Button type="primary" @click="handleSureOwn">确认</Button>
      </div>
    </Modal>
    <Modal  draggable
            title="选择车架号"
            :closable="false"
            :mask-closable="false"
            width="900"
            v-model="is_vin">
      <div slot="header" style="display:flex;justify-content: space-between;align-items: center">
        <div style="font-size: 16px">选择车架号</div>
        <div style="display: flex;align-items: center"><span style="font-size: 14px;margin-right: 10px">创建新的车架号：</span><i-switch v-model="isCreateVin"></i-switch></div>
      </div>
      <Form :label-width="100" style="display: flex;flex-wrap: wrap" v-show="isCreateVin">
        <FormItem label="创建车架号：">
          <Input clearable style="width: 200px" placeholder="请输入" v-model="newVin"/>
        </FormItem>
      </Form>
      <Form :label-width="100" style="display: flex;flex-wrap: wrap" v-show="!isCreateVin">
        <FormItem label="车架号：">
          <Input clearable style="width: 200px" placeholder="请输入" v-model="vinText"/>
        </FormItem>
        <FormItem :label-width="10">
          <Button type="primary" ghost @click="searchVin">查询</Button>
        </FormItem>
      </Form>
      <div style="height: 500px;padding-bottom: 50px;position: relative" v-show="!isCreateVin">
      <vxe-grid
          v-bind="vinGridOptions"
          @radio-change="radioChangeEvent"
          ref="xTable1"
      >
        <template #header>
          <vxe-button type="text" @click="clearRadioRowEevnt" :disabled="!selectRow">取消</vxe-button>
        </template>
      </vxe-grid>
        <Footer
            :pageSize="vin_page_size"
            :pageIndex="vin_page_index"
            :total="vin_total"
            @changeSize="changeVinSize"
            @changePage="changeVinPage"
        ></Footer>
      </div>
      <div slot="footer">
        <Button style="margin-right: 10px" @click="is_vin=false">取消</Button>
        <Button type="primary" ghost @click="handleSureVin">确认</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      modalData: {
        name: "",
        phone: "",
        id: "",
      },
      isCreateVin:false,
      vinText:'',
      newVin:'',
      selectRow:null,
      is_ready: true,
      headers: { 'Authorization': localStorage.getItem('token') },
      img_type: [],
      menuList: [],
      type: '',
      stepList:[],
      employeeList: [],
      rollFilmList: [],
      basicRollFilmList: [],
      carDepartList: [],
      SureRollFilmCombineList: [],
      rollFilmCombineList: [],
      carTypeList: [],
      nameList: [],
      ownerList: [],
      carFilesList: [],
      SureCarFilesList: [],
      specialList: [],
      workList: [],
      workProductList: [],
      areaList: [],
      companyList: [],
      current:0,
      fourShopList: [],
      storehouseList: [],
      oaGridOptions:{
        border: true,
        resizable: true,
        showOverflow: true,
        align: 'left',
        columns: [
          { field: 'sort', width: 80, title: '排序', showHeaderOverflow: true },
          { field: 'crt_time', title: '时间', showHeaderOverflow: true, minWidth: 100, slots: { default: 'crt_time' } },
          { field: 'state', title: '状态', showHeaderOverflow: true, minWidth: 100, slots: {default: 'state' } },
          { field: 'remark', title: '原因', showHeaderOverflow: true, minWidth: 100 },
        ],
        data: [

        ]
      },
      vin_page_index:1,
      vin_page_size:10,
      vin_total:0,
      vinGridOptions:{
        border: true,
        maxHeight:'440px',
        resizable: true,
        showOverflow: true,
        align: 'center',
        columns: [
          {type:'radio',minWidth: 50,slots:{header:'header'}},
          { field: 'vin_no', title: '车架号', showHeaderOverflow: true, minWidth: 100},
          { field: 'car_type_name', title: '车型分类', showHeaderOverflow: true, minWidth: 100},
          { field: 'car_file_name', title: '车型档案', showHeaderOverflow: true, minWidth: 100},
          { field: 'car_owner_name', title: '车主姓名', showHeaderOverflow: true, minWidth: 100},
          { field: 'car_owner_phone', title: '联系方式', showHeaderOverflow: true, minWidth: 100},
        ],
        data: []
      },
      oaCheckGridOptions:{
        border: true,
        maxHeight:'auto',
        resizable: true,
        showOverflow: true,
        align: 'center',
        columns: [
          { field: 'title', title: '审核姓名', showHeaderOverflow: true, minWidth: 100},
        ],
        data: [

        ]
      },
      formData: {
        construction_time: new Date(),
        sub: [
          {
            roll_film_combine_id: '',
            gridOptions: {
              border: true,
              resizable: true,
              showOverflow: true,
              align: 'left',
              editConfig: {
                trigger: 'click',
                mode: 'row',
                showStatus: true
              },
              columns: [
                { field: 'set', title: '操作', showHeaderOverflow: true, slots: { default: 'set' }, width: 160, align: 'center' },
                { type: 'seq', width: 80, title: '序号', showHeaderOverflow: true },
                { field: 'car_depart_name', title: '施工部位', showHeaderOverflow: true, minWidth: 100, editRender: {}, slots: { edit: 'car_depart_name' } },
                { field: 'basic_roll_film_name', title: '卷膜分类', showHeaderOverflow: true, minWidth: 100, editRender: {}, slots: { edit: 'basic_roll_film_name' } },
                { field: 'roll_film_name', title: '卷膜型号', showHeaderOverflow: true, minWidth: 100, editRender: {}, slots: { edit: 'roll_film_name' } },
                { field: 'roll_film_number', title: '卷膜编号', showHeaderOverflow: true, minWidth: 100, editRender: {}, slots: { edit: 'roll_film_number' } },
                { field: 'meter', title: '耗用米数', showHeaderOverflow: true, minWidth: 100 },
              ],
              data: [

              ]
            }
          }
        ],
        name_id: "",
        status: 0
      },
      imgData: {
        '1': [],
        '2': '',
        '3': [],
        '4': '',
        '5': '',
        '6': '',
        '7': '',
        '8': '',
        '1show': [],
        '2show': '',
        '3show': [],
        '4show': '',
        '5show': '',
        '6show': '',
        '7show': '',
        '8show': '',
      },
      is_show:false,
      is_create: false,
      constructionPersonList: [],
      oa_state:'',
      oa_state_m:'',
      oa_id:"",
      oa_remark:'',
      is_oa:false,
      is_check:false,
      is_oaDetail:false,
      is_o:true,
      is_other:false,
      employee_id:'',
      is_vin:false,
      vinProxyData:{}
    }
  },
  created() {
    //获取4s店列表
    this.axios.post('/api/foursShopList').then(res => {
      this.fourShopList = res.data.data;
    })
    //获取仓库
    this.axios.post('/api/storehouseList').then(res => {
      this.storehouseList = res.data.data;
    })
    //获取集团
    this.axios.post('/api/companyList').then(res => {
      this.companyList = res.data.data;
    })
    //获取区域
    this.axios.post('/api/areaList').then(res => {
      this.areaList = this.getArr(res.data);
    })
    //获取业务类型
    this.axios.post('/api/basicTypeList', { type: 1 }).then(res => {
      this.workList = res.data.data;
    })
    //获取特殊情况
    this.axios.post('/api/basicTypeList', { type: 3 }).then(res => {
      this.specialList = res.data.data;
    })
    //获取车辆品牌
    this.axios.post('/api/carTypeList').then(res => {
      this.carTypeList = this.getArr(res.data);
    })
    //获取车辆型号
    this.axios.post('/api/carFilesList').then(res => {
      this.carFilesList = res.data.data;
      this.SureCarFilesList = JSON.parse(JSON.stringify(res.data.data));
    })
    // //获取车架号
    // this.axios.post('/api/ownerList').then(res => {
    //   this.ownerList = res.data.data;
    // })
    //获取套餐档案
    this.axios.post('/api/rollFilmCombineList', { roll_film_id: 1,use:1 }).then(res => {
      this.rollFilmCombineList = res.data.data;
    })
    //获取车辆部位
    this.axios.post('/api/carDepartList').then(res => {
      this.carDepartList = res.data.data;
    })
    //获取卷膜分类
    this.axios.post('/api/basicRollFilmList').then(res => {
      this.basicRollFilmList = this.getArr(res.data)
    })
    //获取人员列表
    this.axios.post('/api/employeeList', { all_emp: 1 }).then(res => {
      this.employeeList = res.data.data;
    })
    //获取列表
    this.axios.post('/api/menuList').then(res => {
      this.menuList = res.data;
    })
  },
  async mounted() {
    this.type = this.$route.query.type;
    //获取施工产品类型
    await this.axios.post('/api/basicTypeList', { type: 2 }).then(res => {
      this.workProductList = res.data.data;
    })
    if (this.type != 1) {
      this.is_ready = false;
      await this.initData();
    }
  },
  methods: {
    handleSelectBID(e){
      if(e){
        let obj = this.workList.find(v=>v.id == e)
        if(obj.special_type){
            this.formData.sub.forEach(c => {
              c.gridOptions.columns = [
                { field: 'set', title: '操作', showHeaderOverflow: true, slots: { default: 'set' }, width: 160, align: 'center' },
                { type: 'seq', width: 80, title: '序号', showHeaderOverflow: true },
                { field: 'car_depart_name', title: '施工部位', showHeaderOverflow: true, minWidth: 100,align: "center",editRender: {}, slots: { edit: 'car_depart_name' } }
              ]
            })
        }else {

            this.formData.sub.forEach(c => {
              c.gridOptions.columns = [
                { field: 'set', title: '操作', showHeaderOverflow: true, slots: { default: 'set' }, width: 160, align: 'center' },
                { type: 'seq', width: 80, title: '序号', showHeaderOverflow: true },
                { field: 'car_depart_name', title: '施工部位', showHeaderOverflow: true, minWidth: 100, editRender: {}, slots: { edit: 'car_depart_name' } },
                { field: 'basic_roll_film_name', title: '卷膜分类', showHeaderOverflow: true, minWidth: 100, editRender: {}, slots: { edit: 'basic_roll_film_name' } },
                { field: 'roll_film_name', title: '卷膜型号', showHeaderOverflow: true, minWidth: 100, editRender: {}, slots: { edit: 'roll_film_name' } },
                { field: 'roll_film_number', title: '卷膜编号', showHeaderOverflow: true, minWidth: 100, editRender: {}, slots: { edit: 'roll_film_number' } },
                { field: 'meter', title: '耗用米数', showHeaderOverflow: true, minWidth: 100 }
            ]
            })

        }
      }
    },
    handleSureVin(){
      if(this.isCreateVin){
        if(!this.newVin){
          return this.$Message.warning('请输入新的车架号')
        }else {
          this.formData.own_id = 0;
          this.formData.vin_no = this.newVin
          this.is_create=true
          this.formData.own_name = '';
          this.formData.own_phone = '';
          this.formData.name_id = '';
        }
      }else {
        if(!this.selectRow){
          return this.$Message.warning('请选择车架号！')
        }else{
          this.formData.own_id = this.selectRow.id;
          this.is_create = false;
          this.formData.car_type = this.selectRow.car_type;
          this.formData.car_file_id = this.selectRow.car_file_id;
          this.formData.vin_no = this.selectRow.vin_no;
          this.formData.name_id = '';
          this.formData.is_big = this.carFilesList.find(v => v.id == this.formData.car_file_id).is_big;
          this.axios.post('/api/ownerDetail', { id:this.formData.own_id }).then(res => {
            this.nameList = res.data.sub.filter(v => v.use)
          })
        }
      }
      this.$nextTick(()=>{
        this.is_vin=false
      })
    },
    searchVin(){
      this.vinProxyData = {
        vin_no:this.vinText
      }
      this.handleChooseVin(this.vinProxyData)
    },
    radioChangeEvent({row}){
      this.selectRow = row
    },
    clearRadioRowEevnt () {
      this.selectRow = null
      this.$refs.xTable1.clearRadioRow()
    },
    changeVinSize(e){
      this.vin_page_size = e;
      this.vin_page_index = 1;
      this.handleChooseVin(this.vinProxyData);
    },
    changeVinPage(e){
      this.vin_page_index = e
      this.handleChooseVin(this.vinProxyData);
    },
    handleChooseVin(row){
      //获取车架号
      this.axios.post('/api/ownerList',{...row,page_index:this.vin_page_index,page_size:this.vin_page_size}).then(res => {
        this.vinGridOptions.data = res.data.data;
        this.vin_total = res.data.total;
        this.vinText = ''
        this.is_vin = true;
      })
    },
    handleShowCheckMan(){
      this.axios.post('/api/oaSubUserDetail',{order_no:this.$route.query.order_number}).then(res=>{
        let data = [];
        res.data.forEach(v=>{
          let obj = {title:v};
          data.push(obj)
        })
        this.oaCheckGridOptions.data = data;
        this.is_check = true;
      })
    },
    handleCancel() {
      this.is_show = false;
    },
    handleSureOwn() {
      this.modalData.id = Date.parse(new Date());
      this.nameList.push(JSON.parse(JSON.stringify(this.modalData)));
      this.modalData = {
        name: "",
        phone: "",
        id: ''
      };
      this.is_show = false;
    },
    handleOaModal(){
      let menu_id = this.menuList.find(v => v.uri == '/cms/BusinessManagement/Construction/index').id;
      this.axios.post('/api/oaOrderList',{menu_id,order_no:this.$route.query.order_number}).then(res=>{
        this.oaGridOptions.data = res.data;
        this.axios.post('/api/oaGetTeamDetail',{order_no:this.$route.query.order_number}).then(req=>{
          if(req.code==200){
            this.current = req.data.length;
            this.stepList = req.data;
            this.is_oaDetail = true;
          }
        })
      })

    },
    handlePassModal(e){
       this.oa_state_m  = e;
       this.oa_remark = '';
       this.is_oa = true;
    },
    handlePassModalOther(){
      this.is_other = true;
      this.employee_id = '';
    },
    handlePassOver(){
      if (this.is_o) {
        this.is_o = false
        let data = {
          id:this.oa_id,
          employee_id:this.employee_id
        }
        this.axios.post('/api/oaCheckMove',data).then(res=>{
          if(res.code === 200){
            this.$Message.success(res.msg)
            this.is_other=false
            this.initData()
          }
          setTimeout(()=>{
            this.is_o = true
          },2000)
        })
      }
    },
    handlePass(){
      if (this.is_o) {
        this.is_o = false
        let data = {
          id:this.oa_id,
          state:this.oa_state_m,
          remark:this.oa_remark
        }
        this.axios.post('/api/oaCheck',data).then(res=>{
          if(res.code === 200){
            this.$Message.success(res.msg)
            this.is_oa=false
            if(this.oa_state_m){
              this.$router.push('/cms/BusinessManagement/Construction/index')
            }else {
              this.initData()
            }
          }
          setTimeout(()=>{
            this.is_o = true
          },2000)
        })
      }
    },
    handleChangeCarType(e) {
      if (e) {
        this.SureCarFilesList = this.carFilesList.filter(v => v.car_type_id == e);
      } else {
        this.SureCarFilesList = JSON.parse(JSON.stringify(this.carFilesList));
      }
      this.formData.car_file_id = '';
    },
    handleAddBox(index) {
      this.formData.sub.splice(index + 1, 0,  (this.workList.find(v=>v.id==this.formData.basic_type_bussiness_id)&&this.workList.find(v=>v.id==this.formData.basic_type_bussiness_id).special_type)?{
        roll_film_combine_id: '',
        gridOptions: {
          border: true,
          resizable: true,
          showOverflow: true,
          align: 'left',
          editConfig: {
            trigger: 'click',
            mode: 'row',
            showStatus: true
          },
          columns: [
            { field: 'set', title: '操作', showHeaderOverflow: true, slots: { default: 'set' }, width: 160, align: 'center' },
            { type: 'seq', width: 80, title: '序号', showHeaderOverflow: true },
            { field: 'car_depart_name', title: '施工部位', showHeaderOverflow: true,align:"center", minWidth: 100, editRender: {}, slots: { edit: 'car_depart_name' } }
          ],
          data: [

          ]
        }
      }:{
        roll_film_combine_id: '',
        gridOptions: {
          border: true,
          resizable: true,
          showOverflow: true,
          align: 'left',
          editConfig: {
            trigger: 'click',
            mode: 'row',
            showStatus: true
          },
          columns: [
            { field: 'set', title: '操作', showHeaderOverflow: true, slots: { default: 'set' }, width: 160, align: 'center' },
            { type: 'seq', width: 80, title: '序号', showHeaderOverflow: true },
            { field: 'car_depart_name', title: '施工部位', showHeaderOverflow: true, minWidth: 100, editRender: {}, slots: { edit: 'car_depart_name' } },
            { field: 'basic_roll_film_name', title: '卷膜分类', showHeaderOverflow: true, minWidth: 100, editRender: {}, slots: { edit: 'basic_roll_film_name' } },
            { field: 'roll_film_name', title: '卷膜型号', showHeaderOverflow: true, minWidth: 100, editRender: {}, slots: { edit: 'roll_film_name' } },
            { field: 'roll_film_number', title: '卷膜编号', showHeaderOverflow: true, minWidth: 100, editRender: {}, slots: { edit: 'roll_film_number' } },
            { field: 'meter', title: '耗用米数', showHeaderOverflow: true, minWidth: 100 },
          ],
          data: [

          ]
        }
      }
      )
    },
    handleReduceBox(index) {
      this.formData.sub.splice(index, 1);
    },
    handleSelectBRF(e, row) {
      if (e) {
        row.rollFilmList = this.rollFilmList.filter(v => v.b_r_f_id == e && (this.formData.company_id ? v.company_id == this.formData.company_id : true));
        row.basic_roll_film_name = this.basicRollFilmList.find(v => v.id == e).title;
      } else {
        row.rollFilmList = this.rollFilmList.filter(v => this.formData.company_id ? v.company_id == this.formData.company_id : true);
        row.basic_roll_film_name = '';
      }

    },
    handleSelectName(e) {

      if (e) {
        this.$set(this.formData, 'name_id', e);

      } else {
        this.$set(this.formData, 'name_id', '');

      }
      this.$forceUpdate();
    },
    handleSelectCarFile(e) {
      if (e) {
        let is_big = this.carFilesList.find(v => v.id == e).is_big;
        this.SureRollFilmCombineList = this.rollFilmCombineList.filter(v => (v.company_id == this.formData.company_id && (this.formData.basic_type_item_id ? this.workProductList.find(x => x.id == this.formData.basic_type_item_id).b_r_f_id.split(',').map(b => b * 1).indexOf(v.basic_roll_film_id) != -1 : true)));
        this.formData.is_big = is_big
      } else {
        this.SureRollFilmCombineList = [];
      }
      this.formData.sub.forEach(v => {
        v.roll_film_combine_id = '';
        v.gridOptions.data = [];
      })
    },
    handleCreateVin(val) {
      this.ownerList.push({
        vin_no: val
      })
    },
    looks(img, type) {
      let array = [];
      if (type) {
        img.forEach(v => {
          let obj = {};
          obj.img_url = v;
          array.push(obj);
        })
      } else {
        array = [{ img_url: img }];
      }

      this.$previewImg({
        list: array,
        baseUrl: this.$store.state.ip,
        baseImgField: "img_url",
        baseTitleField: "",
      });
    },
    handleSuccess(res, type) {
      if (res.code === 200) {
        if (type === '3') {
          this.imgData['3'].push(res.data.url);
            this.imgData['3show'].push(this.$store.state.ip+res.data.url)
        } else if (type === '1') {
          this.imgData['1'].push(res.data.url);
          console.log(this.imgData)
            this.imgData['1show'].push(this.$store.state.ip+res.data.url)
        } else {
          this.imgData[type] = res.data.url;
            this.imgData[`${type}show`]=this.$store.state.ip+res.data.url
        }

console.log(this.imgData)
      }
    },
    handleError(file) {
      if (file.size > 3099648) {
        this.$Message.warning('图片文件大小不能超过3mb！')
        return false
      }
    },
    handleChangeBasicType(e) {
      if (e) {
        this.img_type = this.workProductList.find(v => v.id == e).img_type.split(',');
        this.SureRollFilmCombineList = this.rollFilmCombineList.filter(v => ((this.formData.company_id ? v.company_id == this.formData.company_id : true) && this.workProductList.find(x => x.id == e).b_r_f_id.split(',').map(b => b * 1).indexOf(v.basic_roll_film_id) != -1));
        this.formData.sub.roll_film_combine_id = [];
      } else {
        this.img_type = [];
        this.SureRollFilmCombineList = this.rollFilmCombineList.filter(v => (this.formData.company_id ? v.company_id == this.formData.company_id : true))
      }
      this.imgData = {
        '1': [],
        '2': '',
        '3': [],
        '4': '',
        '5': '',
        '6': '',
        '7': '',
        '8': '',
        '1show': [],
        '2show': '',
        '3show': [],
        '4show': '',
        '5show': '',
        '6show': '',
        '7show': '',
        '8show': '',
      }
    },
    footerMethod({ columns, data }) {
      return [
        columns.map((column, index) => {
          if (index === 0) {
            return '合计'
          } else if (['meter'].includes(column.property)) {
            return this.sumNum(data, column.property)
          }
          return null
        })
      ]
    },
    sumNum(list, field) {
      let count = 0
      list.forEach(item => {
        count += Number(item[field] ? item[field] : 0)
      })
      return count.toFixed(2)
    },
    handleCheck(e) {
      let menu_id = this.menuList.find(v => v.uri == '/cms/BusinessManagement/Construction/index').id;
      if(e){
        this.$Modal.confirm({
          title:'确认',
          content:'确认弃审吗？',
          onOk:()=>{
            this.axios.post('/api/checkAllOver', {
              order_number: this.$route.query.order_number,
              opt_case: 5,
              menu_id
            }).then(res => {
              if (res.code == 200) {
                this.$Message.success(res.msg);
                this.initData();
              }
            })
          }
        })
      }else{
        this.axios.post('/api/checkAll', { order_number: this.$route.query.order_number, opt_case: 5, menu_id }).then(res => {
          if (res.code == 200) {
            this.$Message.success(res.msg);
            this.initData();
          }
          if(res.code == 201&&res.msg == 'construction_rule'){
            this.$Modal.confirm({
              title:'审核确认',
              content:'有重复的车架号，是否继续审核？',
              onOk:()=>{
                this.axios.post('/api/checkAll',{ order_number: this.$route.query.order_number, opt_case: 5, menu_id, is_confirm:1}).then(res=>{
                  if (res.code == 200) {
                    this.$Message.success(res.msg);
                    this.initData();
                  }
                })
              }
            })
          }
        })
      }
    },
    initData() {
      this.axios.post('/api/constructionDetail', { order_number: this.$route.query.order_number }).then(res => {
        res.data.construction_time = this.func.replaceDateNoHMS(res.data.construction_time);
        this.formData = JSON.parse(JSON.stringify(res.data));
        if ( this.formData.status === 1 ) {
          let menu_id = this.menuList.find(v => v.uri == '/cms/BusinessManagement/Construction/index').id;
          this.axios.post('/api/oaOrderState',{menu_id,order_no:this.$route.query.order_number}).then(res=>{
            if (res.code === 200) {
              this.oa_state = res.data.state;
              this.oa_id = res.data.id
            }
          })
        }

        this.formData.is_big = this.carFilesList.find(v => v.id == this.formData.car_file_id).is_big;
        this.SureRollFilmCombineList = this.rollFilmCombineList.filter(v => (v.company_id == this.formData.company_id && (this.formData.basic_type_item_id ? this.workProductList.find(x => x.id == this.formData.basic_type_item_id).b_r_f_id.split(',').map(b => b * 1).indexOf(v.basic_roll_film_id) != -1 : true)
        ));
        this.img_type = this.workProductList.find(v => v.id == this.formData.basic_type_item_id).img_type.split(',');
        let id = this.fourShopList.find(v => v.id == this.formData.four_shop_id).construction_person.map(c => c.id);
        let arr = JSON.parse(JSON.stringify(this.employeeList));
        let arr1 = [];
        let arr2 = [];
        arr.forEach(v => {
          v.title = v.emp_name
          if (id.indexOf(v.id) == -1) {
            v.disable = true;
            arr1.push(v);
          } else {
            v.disable = false;
            arr2.push(v)
          }
        })
        this.constructionPersonList = arr2.concat(arr1);
        this.formData.img.forEach(v => {
          if (v.src) {
            if (v.type == 3 || v.type == 1) {
              this.imgData[v.type] = v.src.split(',');
              this.imgData[v.type + 'show'] = v.show_url.split(',')
            } else {
              this.imgData[v.type] = v.src;
              this.imgData[v.type + 'show'] = v.show_url
            }
          }


        })
        this.formData.sub.forEach(v => {
          v.gridOptions = {
            border: true,
            resizable: true,
            showOverflow: true,
            align: 'left',
            editConfig: {
              trigger: 'click',
              mode: 'row',
              showStatus: true
            },
            columns: [
              { field: 'set', title: '操作', showHeaderOverflow: true, slots: { default: 'set' }, width: 160, align: 'center' },
              { type: 'seq', width: 80, title: '序号', showHeaderOverflow: true },
              { field: 'car_depart_name', title: '施工部位', showHeaderOverflow: true, minWidth: 100, editRender: {}, slots: { edit: 'car_depart_name' } },
              { field: 'basic_roll_film_name', title: '卷膜分类', showHeaderOverflow: true, minWidth: 100, editRender: {}, slots: { edit: 'basic_roll_film_name' } },
              { field: 'roll_film_name', title: '卷膜型号', showHeaderOverflow: true, minWidth: 100, editRender: {}, slots: { edit: 'roll_film_name' } },
              { field: 'roll_film_number', title: '卷膜编号', showHeaderOverflow: true, minWidth: 100, editRender: {}, slots: { edit: 'roll_film_number' } },
              { field: 'meter', title: '耗用米数', showHeaderOverflow: true, minWidth: 100 },
            ],
            data: v.detail.length===0?[{ car_depart_id: '', car_depart_name: '', basic_roll_film_id: '', basic_roll_film_name: '', roll_film_id: '', roll_film_name: '', meter: '', roll_film_number: '', roll_film_number_arr: [] }]:v.detail
          }
        })
        let dataa ={}
        if(this.type==2){
          dataa.order_number = this.$route.query.order_number;
        }
        //获取卷膜型号
        this.axios.post('/api/rollFilmList', { use:1,storehouse_id: this.formData.storehouse_id,...dataa }).then(req => {
          this.rollFilmList = req.data.data;
          this.formData.sub.forEach(c => {
            c.gridOptions.data.forEach(v => {
              this.handleSelectBRF(v.basic_roll_film_id, v);
              v.roll_film_number_arr = this.rollFilmList.find(c => c.id == v.roll_film_id)?this.rollFilmList.find(c => c.id == v.roll_film_id).roll_film_number_arr:[];
            })
          })
          this.is_ready = true;
        })
        this.formData.sub.forEach(b => {
          b.gridOptions.data.forEach(v => {
            v.basic_roll_film_name = v.b_r_f_name;
            v.roll_film_name = v.title;
          })
        })
        if(this.workList.find(v=>v.id==this.formData.basic_type_bussiness_id)&&this.workList.find(v=>v.id==this.formData.basic_type_bussiness_id).special_type){
         if(res.data.status > 0){
           this.formData.sub.forEach(c => {
             c.gridOptions.columns = [
               { type: 'seq', width: 80, title: '序号', showHeaderOverflow: true },
               { field: 'car_depart_name', title: '施工部位', showHeaderOverflow: true, minWidth: 100,align: "center" }
           ]
           })
         }else{
           this.formData.sub.forEach(c => {
             c.gridOptions.columns = [
               { field: 'set', title: '操作', showHeaderOverflow: true, slots: { default: 'set' }, width: 160, align: 'center' },
               { type: 'seq', width: 80, title: '序号', showHeaderOverflow: true },
               { field: 'car_depart_name', title: '施工部位', showHeaderOverflow: true, minWidth: 100,align: "center",editRender: {}, slots: { edit: 'car_depart_name' } }
             ]
           })
         }
        }else {
          if (res.data.status > 0) {
            this.formData.sub.forEach(c => {
              c.gridOptions.columns = [
                { type: 'seq', width: 80, title: '序号', showHeaderOverflow: true },
                { field: 'car_depart_name', title: '施工部位', showHeaderOverflow: true, minWidth: 100 },
                { field: 'basic_roll_film_name', title: '卷膜分类', showHeaderOverflow: true, minWidth: 100 },
                { field: 'roll_film_name', title: '卷膜型号', showHeaderOverflow: true, minWidth: 100 },
                { field: 'roll_film_number', title: '卷膜编号', showHeaderOverflow: true, minWidth: 100 },
                { field: 'meter', title: '耗用米数', showHeaderOverflow: true, minWidth: 100 }]
            })
          }
        }
        this.axios.post('/api/ownerDetail', { id: this.formData.own_id }).then(req => {
          this.nameList = req.data.sub?req.data.sub.filter(v => v.use == '1'):[];
          this.nameList.forEach(v=>{
            if(!v.phone){
              v.phone = ' '
            }
          })
          this.formData.name_id = res.data.own_sub_id;
        })
      })
    },
    handleSave() {
      let img = [];
      let key = Object.keys(this.imgData);
      key.forEach(v => {
        if (this.imgData[v] && this.imgData[v].length != 0 && v.indexOf('show')==-1) {

          let obj = {};
          if (v === '3' || v === '1') {

            obj.type = v;
            obj.src = this.imgData[v].toString();
            img.push(obj);
          } else {
            obj.type = v;
            obj.src = this.imgData[v];
            img.push(obj);
          }
        }
      })
      let data = JSON.parse(JSON.stringify(this.formData));
      if (!this.is_create) {
        data.own_name = data.name_id ? this.nameList.find(v => v.id == data.name_id).name : '';
        data.own_phone = data.name_id ? this.nameList.find(v => v.id == data.name_id).phone : '';
      }
      data.sub.forEach(v => {
        v.detail = JSON.parse(JSON.stringify(v.gridOptions.data));
        delete v.gridOptions;
      })
      data.construction_time = data.construction_time ? Date.parse(data.construction_time).toString().slice(0, 10) : '';
      data.img = img;
      if (this.type == 1) {
        this.axios.post('/api/constructionAdd', { ...data }).then(res => {
          if (res.code == 200) {
            this.$Message.success(res.msg);
            this.$router.push({ path: '/cms/BusinessManagement/Construction/index' })
          }
        })
      } else {
        this.axios.post('/api/constructionEdit', { ...data }).then(res => {
          if (res.code == 200) {
            this.$Message.success(res.msg);
            // this.$router.push({ path: '/cms/BusinessManagement/Construction/index' })
          }
        })
      }
    },
    handleSelectRollFilm(e, row) {
      if (e) {
        row.roll_film_name = this.rollFilmList.find(v => v.id == e).title;
        row.basic_roll_film_id = this.rollFilmList.find(v => v.id == e).b_r_f_id;
        row.basic_roll_film_name = this.rollFilmList.find(v => v.id == e).b_r_f_name;
        row.roll_film_number_arr = this.rollFilmList.find(v => v.id == e).roll_film_number_arr;
        row.warranty_year = this.rollFilmList.find(v => v.id == e).warranty_year;
        row.roll_film_number = '';
      } else {
        row.roll_film_name = '';
        row.basic_roll_film_id = '';
        row.basic_roll_film_name = '';
        row.roll_film_number_arr = [];
        row.roll_film_number = '';
        row.warranty_year = '';
      }
    },
    handleSelectCarDepart(e, row) {
      if (e) {
        row.car_depart_name = this.carDepartList.find(v => v.id == e).title;
        row.meter = this.carDepartList.find(v => v.id == e).expend_meters;
      } else {
        row.car_depart_name = '';
        row.meter = '';
      }
    },
    handleRemove(index, idx) {
      if (this.formData.sub[idx].gridOptions.data.length > 1) {
        this.formData.sub[idx].gridOptions.data.splice(index, 1);
      } else {
        return
      }
    },
    handleAdd(index, idx) {
      this.formData.sub[idx].gridOptions.data.splice(index + 1, 0, { car_depart_id: '', car_depart_name: '', basic_roll_film_id: '', basic_roll_film_name: '', roll_film_id: '', roll_film_name: '', meter: '', roll_film_number: '', roll_film_number_arr: [] });
    },
    handleSelectCombine(e, index) {
      if (e) {
        //获取套餐下绑定的卷膜分类和型号，部位的分类和型号套餐下的都一样
        let id = this.SureRollFilmCombineList.find(v => v.id == e).c_d_c_id;
        let roll_film_id = this.SureRollFilmCombineList.find(v => v.id == e).roll_film_id;
        let roll_film_name = this.SureRollFilmCombineList.find(v => v.id == e).roll_film_name;
        let basic_roll_film_name = this.SureRollFilmCombineList.find(v => v.id == e).roll_film_type;
        let basic_roll_film_id = this.SureRollFilmCombineList.find(v => v.id == e).basic_roll_film_id;
        let warranty_year = this.rollFilmList.find(v => v.id == roll_film_id).warranty_year;
        this.axios.post('/api/carDepartCombineDetail', { id }).then(res => {
          this.formData.sub[index].gridOptions.data = [];
          this.$set(this.formData.sub[index].gridOptions,'data',[]);
          let car_depart_sub = this.formData.is_big ? res.data.car_depart_sub_big : res.data.car_depart_sub; //如果是大型车就拿big的不是就是拿另外一个非大型车的
          let data = JSON.parse(JSON.stringify(this.carDepartList.filter(v => car_depart_sub.indexOf(v.id) != -1)));
          data.forEach(v => {
            v.warranty_year = warranty_year;
            v.car_depart_name = v.title;
            // v.disable = true;
            v.basic_roll_film_id = basic_roll_film_id;
            v.roll_film_name = roll_film_name;
            v.basic_roll_film_name = basic_roll_film_name;
            this.handleSelectBRF(basic_roll_film_id, v);
            v.roll_film_id = roll_film_id
            if (this.formData.is_big) {
              console.log(this.formData.is_big, 'da')
              v.meter = res.data.car_depart_meters_big.find(c => c.car_depart_id == v.id).car_depart_meter*1 ? res.data.car_depart_meters_big.find(c => c.car_depart_id == v.id).car_depart_meter : v.expend_meters;
              v.car_depart_id = v.id;
            } else {
              console.log(this.formData.is_big, 'xiao')
              v.meter = res.data.car_depart_meters.find(c => c.car_depart_id == v.id).car_depart_meter*1 ? res.data.car_depart_meters.find(c => c.car_depart_id == v.id).car_depart_meter : v.expend_meters;
              v.car_depart_id = v.id;
            }
            v.roll_film_number_arr = this.rollFilmList.find(c => c.id == v.roll_film_id).roll_film_number_arr;
            // v.roll_film_number_arr = [];
          })
          console.log(data,'zhen')
          this.formData.sub[index].gridOptions.data = [...this.formData.sub[index].gridOptions.data, ...JSON.parse(JSON.stringify(data))];
          this.$forceUpdate();
        })
      } else {
        this.formData.sub[index].gridOptions.data = [{ car_depart_id: '', car_depart_name: '', basic_roll_film_id: '', basic_roll_film_name: '', roll_film_id: '', roll_film_name: '', meter: '', roll_film_number: '', roll_film_number_arr: [] }];
      }
      this.$forceUpdate();
    },
    getArr(arr) {
      let data = [];
      arr.forEach(ele => {

        if (ele.children.length != 0) {
          data = [...data, ...this.getArr(ele.children)];
        } else {
          data.push(ele);
        }
      });
      return data;
    },
    handleSelectFourShop(e) {
      if (e) {
        this.formData.storehouse_id = this.fourShopList.find(v => v.id == e).storehouse_id;
        this.formData.technical_manager = this.fourShopList.find(v => v.id == e).technical_manager;
        this.formData.regional_manager = this.fourShopList.find(v => v.id == e).regional_manager;
        this.formData.company_id = this.fourShopList.find(v => v.id == e).company_id;
        this.formData.area = this.fourShopList.find(v => v.id == e).area;
        this.formData.contract_person = this.fourShopList.find(v => v.id == e).contract_person;
        this.formData.contract_phone = this.fourShopList.find(v => v.id == e).contract_phone;
        this.formData.regional_manager = this.fourShopList.find(v => v.id == e).regional_manager;
        this.formData.address = this.fourShopList.find(v => v.id == e).address;
        this.SureRollFilmCombineList = this.rollFilmCombineList.filter(v => (v.company_id == this.formData.company_id && (this.formData.basic_type_item_id ? this.workProductList.find(x => x.id == this.formData.basic_type_item_id).b_r_f_id.split(',').map(b => b * 1).indexOf(v.basic_roll_film_id) != -1 : true)));
        this.formData.sub.forEach(v => {
          v.roll_film_combine_id = '';
        })
        let id = this.fourShopList.find(v => v.id == this.formData.four_shop_id).construction_person.map(c => c.id);
        let arr = JSON.parse(JSON.stringify(this.employeeList));
        let arr1 = [];
        let arr2 = [];
        arr.forEach(v => {
          v.title = v.emp_name
          if (id.indexOf(v.id) == -1) {
            v.disable = true;
            arr1.push(v);
          } else {
            v.disable = false;
            arr2.push(v)
          }
        })
        this.constructionPersonList = arr2.concat(arr1);
        let dataa ={}
        if(this.type==2){
          dataa.order_number = this.$route.query.order_number;
        }
        //获取卷膜型号
        this.axios.post('/api/rollFilmList', { use:1,storehouse_id: this.formData.storehouse_id,...dataa }).then(res => {
          this.rollFilmList = res.data.data
        })
      } else {
        this.formData.storehouse_id = '';
        this.formData.company_id = '';
        this.formData.area = '';
        this.formData.contract_person = '';
        this.formData.contract_phone = '';
        this.formData.address = '';
        this.formData.sub.roll_film_combine_id = '';
        this.formData.construction_person = '';
        this.formData.technical_manager = '';
        this.formData.regional_manager = '';
      }
      this.formData.sub.forEach(v => {
        v.gridOptions.data = [];
      })
    },
    handleSelectVin(e) {
      if (e) {
        let id = this.ownerList.find(v => (v.vin_no == e)).id ? this.ownerList.find(v => (v.vin_no == e)).id : 0;
        this.formData.own_id = id;
        if (id) {
          this.is_create = false;
          this.formData.car_type = this.ownerList.find(v => (v.vin_no == e)).car_type;
          this.formData.car_file_id = this.ownerList.find(v => v.vin_no == e).car_file_id;
          this.formData.is_big = this.carFilesList.find(v => v.id == this.formData.car_file_id).is_big;
          this.axios.post('/api/ownerDetail', { id }).then(res => {
            this.nameList = res.data.sub.filter(v => v.use)
          })
        } else {
          this.is_create = true;
        }
      } else {
        this.is_create = false;
        this.formData.name_id = '';
        this.formData.car_type = '';
        this.formData.car_file_id = '';
        this.formData.own_id = '';
        this.formData.is_big = '';
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.content {
  height: calc(100% - 40px);
  overflow: auto;
  .content_title {
    font-size: 26px;
    letter-spacing: 20px;
    font-weight: bold;
    text-align: center;
  }
}
.form {
  display: flex;
  flex-wrap: wrap;
  .item {
    width: 25%;
  }
}
.bdy {
  border: 1px solid #e8e5e5;
  margin: 10px 0;
  padding: 10px;
  .title {
    font-size: 20px;
    font-weight: bold;
  }
}
.total_img {
  display: flex;
  flex-wrap: wrap;
  img {
    max-width: 108px;
    max-height: 108px;
  }
  .img_item {
    position: relative;
    .img_title {
      text-align: center;
    }
  }
}
.upd_file {
  width: 108px;
  height: 108px;
  cursor: pointer;
  background-color: #f4f5f7;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img_content {
  position: relative;
}
.delete-img {
  position: absolute;
  right: 0px;
  top: 0px;
  color: red;
  cursor: pointer;
}
.btn {
  cursor: pointer;
}
</style>