jsm-mall-front/src/views/workOrder/basicEngineeringData/index.vue

<template>
  <zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title + '-列表', essential: true }]">
    <template slot-scope="{ activeKey, data }">
      <div
        :style="{
          width: '100%',
          height: activeKey == 'list' ? '100%' : '0px',
          overflow: 'hidden'
        }"
      >
        <template-page
          ref="pageRef"
          :get-list="getList"
          :table-attributes="tableAttributes"
          :table-events="tableEvents"
          :options-evens-group="optionsEvensGroup"
          :moreParameters="moreParameters"
          :column-parsing="columnParsing"
          :exportList="exportList"
          :operation="operation()"
        >
        </template-page>
      </div>
      <div v-if="~['add', 'detail'].indexOf(activeKey)" style="box-sizing: border-box; padding: 16px">
        <el-tabs v-if="activeKey == 'detail'" v-model="activeType_e">
          <el-tab-pane label="基础资料" name="jbzl"></el-tab-pane>
          <el-tab-pane label="修改记录" name="xgjl"></el-tab-pane>
        </el-tabs>
        <br v-if="activeKey == 'detail'" />
        <div v-if="activeType_e == 'jbzl'">
          <zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
            <zj-form-module :title="data.label" :showPackUp="false" :form-data="formData" :form-items="formItems">
            </zj-form-module>
            <zj-form-module title="" label-width="100px" :form-data="formData" :form-items="formItems2">
              <el-tabs slot="header" v-model="activeName">
                <el-tab-pane :disabled="isEditIndex > -1 ? true : false" label="辅材配置" name="items_m"></el-tab-pane>
                <el-tab-pane :disabled="isEditIndex > -1 ? true : false" label="配件配置" name="items_p"></el-tab-pane>
              </el-tabs>
            </zj-form-module>
          </zj-form-container>
          <div slot="footer" class="dialog-footer">
            <el-button size="mini" @click="data.removeTab">取 消</el-button>
            <el-button size="mini" type="primary" @click="quedingbaocun(data.removeTab)">确定</el-button>
          </div>
        </div>
        <div v-if="activeType_e == 'xgjl'">
          <zj-form-container :form-data="formData" :styleSwitch="false">
            <zj-form-module title="修改记录" :showPackUp="false" :form-data="formData" :form-items="logList">
            </zj-form-module>
          </zj-form-container>
        </div>
      </div>
    </template>
  </zj-tab-page>
</template>

<script>
import TemplatePage from '@/components/template/template-page-1.vue'
import import_mixin from '@/components/template/import_mixin.js'
import operation_mixin from '@/components/template/operation_mixin.js'
import ImageUpload from '@/components/file-upload'
import { required, mobileRequired, mobile, httpUrl, email } from '@/components/template/rules_verify.js'
import {
  orderEnginbaseList,
  orderEnginBaseListExport,
  orderEnginBaseSave,
  orderEnginBaseDetail
} from '@/api/basicEngineeringData'
import { lbsAmapRegion } from '@/api/common.js'
import geographicalPosi from '@/components/geographicalPosi/index.vue'
import { listPageV2 } from '@/api/auxiliaryFittings/attachmentProfile'
import { materialNormList } from '@/api/auxiliaryPriceManagement'

export default {
  components: { TemplatePage, ImageUpload, geographicalPosi },
  mixins: [import_mixin, operation_mixin],
  data() {
    return {
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: false
      },
      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      // 勾选选中行
      recordSelected: [],
      activeName: 'items_m',
      formData: {
        companyWechatName: JSON.parse(localStorage.getItem('greemall_user')).companyName,
        projectName: '',
        projectNo: '',
        manger: '',
        mobile: '',
        startTime: '',
        endTime: '',
        provinceId: '',
        cityId: '',
        areaId: '',
        streetId: '',
        address: '',
        remark: '',
        items_m: [],
        items_p: []
      },
      provinceList: [],
      cityList: [],
      areaList: [],
      streetList: [],
      fucaiSel: [],
      peijianSel: [],
      isEditIndex: -1,
      activeType_e: 'jbzl'
    }
  },
  computed: {
    // 更多参数
    moreParameters() {
      return []
    },
    // 事件组合
    optionsEvensGroup() {
      return [
        [
          [
            this.optionsEvensAuth('add', {
              click: () => {
                this.$refs.tabPage.addTab({
                  // 对应显示的模块
                  activeKey: 'add',
                  // 唯一标识
                  key: 'add',
                  // 页签名称
                  label: '新增',
                  // 打开时事件
                  triggerEvent: () => {
                    this.activeType_e = 'jbzl'
                    this.handleClose()
                    this.$nextTick(() => {
                      this.getinitlbslist()
                      this.openForm()
                    })
                  },
                  // 关闭时事件
                  closeEvent: () => {}
                })
              }
            })
          ]
        ]
      ]
    },
    formItems() {
      return [
        {
          name: 'el-input',
          md: 12,
          attributes: {
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '工程名称',
            prop: 'projectName',
            rules: [...required]
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: {
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '工程编号',
            prop: 'projectNo',
            rules: [...required]
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: {
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '负责人',
            prop: 'manger',
            rules: [...required]
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: {
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '联系电话',
            prop: 'mobile',
            rules: [...mobileRequired]
          }
        },
        {
          name: 'slot-component',
          md: 6,
          formItemAttributes: {
            label: '项目时间',
            prop: 'startTime',
            rules: [...required]
          },
          render: (h, { props }) => {
            return (
              <div
                style={{
                  display: 'flex',
                  'justify-content': 'space-between'
                }}
              >
                <div style="width:49%">
                  <el-date-picker
                    style="width:100%"
                    value={this.formData.startTime}
                    onInput={val => {
                      this.formData.startTime = val
                    }}
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetime"
                    placeholder="选择日期"
                  ></el-date-picker>
                </div>
                <div style="width:49%">
                  <el-date-picker
                    disabled={true}
                    style="width:100%"
                    value={this.formData.endTime}
                    onInput={val => {
                      this.formData.endTime = val
                    }}
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetime"
                    placeholder="选择日期"
                  ></el-date-picker>
                </div>
              </div>
            )
          }
        },
        {
          name: 'el-select',
          md: 6,
          formItemAttributes: {
            label: '项目地址', //省
            prop: 'provinceId',
            errLabel: '省',
            rules: [...required]
          },
          options: this.provinceList.map((v, i) => ({ value: v.id, label: v.name })),
          attributes: { disabled: false, clearable: true, filterable: true, placeholder: '请选择' },
          events: {
            change: val => {
              // 获取省名称
              this.formData.province = this.provinceList.find(item => item.id === val)?.name || ''
              // 清除市区街道以及详细地址数据
              this.delDataK(1)
              lbsAmapRegion({ pid: val }).then(res => {
                this.cityList = res.data
              })
            }
          }
        },
        {
          name: 'el-select',
          md: 5,
          formItemAttributes: {
            'label-width': '0px',
            label: '', //市
            prop: 'cityId',
            errLabel: '市',
            rules: [...required]
          },
          options: this.cityList.map((v, i) => ({ value: v.id, label: v.name })),
          attributes: { disabled: false, clearable: true, filterable: true, placeholder: '请选择' },
          events: {
            change: val => {
              // 获取市名称
              this.formData.city = this.cityList.find(item => item.id === val).name
              // 清除区街道以及详细地址数据
              this.delDataK(2)
              lbsAmapRegion({ pid: val }).then(res => {
                this.areaList = res.data
              })
            }
          }
        },
        {
          name: 'el-select',
          md: 5,
          formItemAttributes: {
            'label-width': '0px',
            label: '', //区
            prop: 'areaId',
            errLabel: '区',
            rules: [...required]
          },
          options: this.areaList.map((v, i) => ({ value: v.id, label: v.name })),
          attributes: { disabled: false, clearable: true, filterable: true, placeholder: '请选择' },
          events: {
            change: val => {
              // 获取区名称
              this.formData.area = this.areaList.find(item => item.id === val).name
              // 清除街道以及详细地址数据
              this.delDataK(3)
              lbsAmapRegion({ pid: val }).then(res => {
                this.streetList = res.data
              })
            }
          }
        },
        {
          name: 'el-select',
          md: 5,
          formItemAttributes: {
            'label-width': '0px',
            label: '', //街道
            prop: 'streetId',
            errLabel: '街道',
            rules: [...required]
          },
          options: this.streetList.map((v, i) => ({ value: v.id, label: v.name })),
          attributes: { disabled: false, clearable: true, filterable: true, placeholder: '请选择' },
          events: {
            change: val => {
              // 获取街道名称
              this.formData.street = this.streetList.find(item => item.id === val).name
              // 清除详细地址数据
              this.delDataK(4)
            }
          }
        },
        {
          name: 'slot-component',
          md: 3,
          formItemAttributes: {
            'label-width': '0px',
            prop: ''
          },
          render: (h, { props }) => {
            return (
              <geographicalPosi
                formData={this.formData}
                onSelectPosi={data => {
                  // 获取经纬度
                  this.formData.lng = data.center[0]
                  this.formData.lat = data.center[1]
                  // 获取定位的省市区街道
                  var { province, city, district, township } = data.data.addressComponent
                  // 获取选中省名称id
                  var { id, name } = this.provinceList.find(item => item.name === province)
                  this.formData.provinceId = id
                  this.formData.province = name
                  // 请求市选项
                  lbsAmapRegion({ pid: this.formData.provinceId }).then(res => {
                    // 赋值市选项
                    this.cityList = res.data
                    // 获取选中市名称id
                    var { id, name } = res.data.find(item => item.name === city)
                    this.formData.cityId = id
                    this.formData.city = name
                    // 请求区选项
                    lbsAmapRegion({ pid: this.formData.cityId }).then(res => {
                      // 赋值区选项
                      this.areaList = res.data
                      // 获取选中区名称id
                      var { id, name } = res.data.find(item => item.name === district)
                      this.formData.areaId = id
                      this.formData.area = name
                      // 请求街道选项
                      lbsAmapRegion({ pid: this.formData.areaId }).then(res => {
                        // 赋值街道选项
                        this.streetList = res.data
                        // 获取选中街道名称id
                        var { id, name } = res.data.find(item => item.name === township)
                        this.formData.streetId = id
                        this.formData.street = name
                        this.formData.address = data.name
                      })
                    })
                  })
                }}
              />
            )
          }
        },
        {
          name: 'el-input',
          md: 24,
          formItemAttributes: { label: '详细地址', prop: 'address', rules: [...required] },
          attributes: { placeholder: '详细地址' }
        },
        {
          name: 'el-input',
          md: 24,
          attributes: {
            type: 'textarea',
            rows: 3,
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '项目说明',
            prop: 'remark'
          }
        }
      ]
    },
    formItems2() {
      return [
        {
          md: 24,
          isShow: true,
          name: 'slot-component',
          formItemAttributes: {
            label: '',
            prop: '',
            'label-width': '0px'
          },
          render: (h, { props, onInput }) => {
            var { value } = props
            return (
              <div>
                {this.activeName == 'items_m'
                  ? [
                      <div style="margin-bottom:10px">
                        <el-button
                          type="primary"
                          onClick={() => {
                            this.addItem('M')
                          }}
                        >
                          添加
                        </el-button>
                      </div>,
                      <zj-table
                        columns={[
                          {
                            columnAttributes: {
                              label: '大类',
                              prop: 'parentCategoryId',
                              propName: 'parentCategoryName',
                              width: 160
                            },
                            render: (h, { row, column, index }) => {
                              return this.isEditIndex == index ? (
                                <div class="redbordererr">
                                  <el-form-item
                                    label=""
                                    lebel-width="0px"
                                    prop={`${this.activeName}.${index}.${column.columnAttributes.prop}`}
                                    rules={required}
                                  >
                                    <el-select
                                      filterable={true}
                                      value={row[column.columnAttributes.prop]}
                                      onInput={val => {
                                        row[column.columnAttributes.prop] = val
                                      }}
                                      onChange={val => {
                                        if (val) {
                                          row[column.columnAttributes.propName] =
                                            this.arrQC(this.fucaiSel, {
                                              value: 'parentCategoryId',
                                              label: 'parentCategoryName'
                                            }).find(item => item.value == val)?.label || ''
                                        } else {
                                          row[column.columnAttributes.propName] = ''
                                        }
                                        this.delItemKey(1, row)
                                      }}
                                      placeholder="请选择"
                                    >
                                      {this.arrQC(this.fucaiSel, {
                                        value: 'parentCategoryId',
                                        label: 'parentCategoryName'
                                      }).map((item, index_) => (
                                        <el-option key={index_} label={item.label} value={item.value}></el-option>
                                      ))}
                                    </el-select>
                                  </el-form-item>
                                </div>
                              ) : (
                                <div style="padding:0 6px">{row[column.columnAttributes.propName]}</div>
                              )
                            }
                          },
                          {
                            columnAttributes: {
                              label: '小类',
                              prop: 'goodsCategoryId',
                              propName: 'goodsCategoryName',
                              width: 160
                            },
                            render: (h, { row, column, index }) => {
                              return this.isEditIndex == index ? (
                                <div class="redbordererr">
                                  <el-form-item
                                    label=""
                                    lebel-width="0px"
                                    prop={`${this.activeName}.${index}.${column.columnAttributes.prop}`}
                                    rules={required}
                                  >
                                    <el-select
                                      filterable={true}
                                      value={row[column.columnAttributes.prop]}
                                      onInput={val => {
                                        row[column.columnAttributes.prop] = val
                                      }}
                                      onChange={val => {
                                        if (val) {
                                          row[column.columnAttributes.propName] =
                                            this.arrQC(
                                              this.fucaiSel.filter(
                                                item => item.parentCategoryId === row.parentCategoryId
                                              ),
                                              { value: 'goodsCategoryId', label: 'categoryName' }
                                            ).find(item => item.value == val)?.label || ''
                                        } else {
                                          row[column.columnAttributes.propName] = ''
                                        }
                                        this.delItemKey(2, row)
                                      }}
                                      placeholder="请选择"
                                    >
                                      {this.arrQC(
                                        this.fucaiSel.filter(item => item.parentCategoryId === row.parentCategoryId),
                                        { value: 'goodsCategoryId', label: 'categoryName' }
                                      ).map((item, index_) => (
                                        <el-option key={index_} label={item.label} value={item.value}></el-option>
                                      ))}
                                    </el-select>
                                  </el-form-item>
                                </div>
                              ) : (
                                <div style="padding:0 6px">{row[column.columnAttributes.propName]}</div>
                              )
                            }
                          },
                          {
                            columnAttributes: {
                              label: '辅材名称',
                              prop: 'goodsId',
                              propName: 'goodsName',
                              width: 160
                            },
                            render: (h, { row, column, index }) => {
                              return this.isEditIndex == index ? (
                                <div class="redbordererr">
                                  <el-form-item
                                    label=""
                                    lebel-width="0px"
                                    prop={`${this.activeName}.${index}.${column.columnAttributes.prop}`}
                                    rules={required}
                                  >
                                    <el-select
                                      filterable={true}
                                      value={row[column.columnAttributes.prop]}
                                      onInput={val => {
                                        row[column.columnAttributes.prop] = val
                                      }}
                                      onChange={val => {
                                        this.delItemKey(3, row)
                                        if (val) {
                                          var data = this.arrQC(
                                            this.fucaiSel.filter(
                                              item =>
                                                item.parentCategoryId === row.parentCategoryId &&
                                                item.goodsCategoryId === row.goodsCategoryId
                                            ),
                                            { value: 'goodsId', label: 'goodsName' }
                                          ).find(item => item.value == val)
                                          row[column.columnAttributes.propName] = data?.label || ''
                                          if (data) {
                                            row.goodsCode = data?.data?.goodsCode
                                            row.goodsSpecification = data?.data?.goodsSpecification
                                            row.normType = 'M'
                                            row.goodsStockUnit = data?.data?.goodsStockUnit
                                          }
                                        } else {
                                          row[column.columnAttributes.propName] = ''
                                        }
                                      }}
                                      placeholder="请选择"
                                    >
                                      {this.arrQC(
                                        this.fucaiSel.filter(
                                          item =>
                                            item.parentCategoryId === row.parentCategoryId &&
                                            item.goodsCategoryId === row.goodsCategoryId
                                        ),
                                        { value: 'goodsId', label: 'goodsName' }
                                      ).map((item, index_) => (
                                        <el-option key={index_} label={item.label} value={item.value}></el-option>
                                      ))}
                                    </el-select>
                                  </el-form-item>
                                </div>
                              ) : (
                                <div style="padding:0 6px">{row[column.columnAttributes.propName]}</div>
                              )
                            }
                          },
                          {
                            columnAttributes: {
                              label: '商品代码',
                              prop: 'goodsCode',
                              width: 160
                            }
                          },
                          {
                            columnAttributes: {
                              label: '规格型号',
                              prop: 'goodsSpecification',
                              width: 160
                            }
                          },
                          {
                            columnAttributes: {
                              label: '单位',
                              prop: 'goodsStockUnit',
                              width: 160
                            }
                          },
                          {
                            columnAttributes: {
                              label: '收费类型',
                              prop: 'normType',
                              width: 160
                            },
                            render: (h, { row, column, index }) => {
                              return (
                                <div style="padding:0 6px">
                                  {{ M: '物料收费', S: '服务收费' }[row[column.columnAttributes.prop]] || ''}
                                </div>
                              )
                            }
                          },
                          ...this.commonColumns
                        ]}
                        tableData={this.formData.items_m}
                        tableAttributes={{
                          size: 'mini',
                          border: true
                        }}
                      />
                    ]
                  : this.activeName == 'items_p'
                  ? [
                      <div style="margin-bottom:10px">
                        <el-button
                          type="primary"
                          onClick={() => {
                            this.addItem('P')
                          }}
                        >
                          添加
                        </el-button>
                      </div>,
                      <zj-table
                        columns={[
                          {
                            columnAttributes: {
                              label: '配件名称',
                              prop: 'goodsId',
                              propName: 'goodsName',
                              width: 160
                            },
                            render: (h, { row, column, index }) => {
                              return this.isEditIndex == index ? (
                                <div class="redbordererr">
                                  <el-form-item
                                    label=""
                                    lebel-width="0px"
                                    prop={`${this.activeName}.${index}.${column.columnAttributes.prop}`}
                                    rules={required}
                                  >
                                    <el-select
                                      filterable={true}
                                      value={row[column.columnAttributes.prop]}
                                      onInput={val => {
                                        row[column.columnAttributes.prop] = val
                                      }}
                                      onChange={val => {
                                        this.delItemKey(3, row)
                                        if (val) {
                                          var data = this.peijianSel.find(item => item.goodsId == val)
                                          row[column.columnAttributes.propName] = data?.goodsName || ''
                                          if (data) {
                                            row.goodsStockUnit = data.goodsStockUnit
                                            row.goodsCode = data.goodsCode
                                            row.normType = data.normType
                                            row.brandRelaName = data.brandRelaName
                                            row.productRelaName = data.productRelaName
                                          }
                                        } else {
                                          row[column.columnAttributes.propName] = ''
                                        }
                                      }}
                                      placeholder="请选择"
                                    >
                                      {this.peijianSel.map((item, index_) => (
                                        <el-option key={index_} label={item.goodsName} value={item.goodsId}></el-option>
                                      ))}
                                    </el-select>
                                  </el-form-item>
                                </div>
                              ) : (
                                <div style="padding:0 6px">{row[column.columnAttributes.propName]}</div>
                              )
                            }
                          },
                          {
                            columnAttributes: {
                              label: '单位',
                              prop: 'goodsStockUnit',
                              width: 160
                            }
                          },
                          {
                            columnAttributes: {
                              label: '商品代码',
                              prop: 'goodsCode',
                              width: 160
                            }
                          },
                          {
                            columnAttributes: {
                              label: '收费类型',
                              prop: 'normType',
                              width: 160
                            },
                            render: (h, { row, column, index }) => {
                              return (
                                <div style="padding:0 6px">
                                  {{ M: '物料收费', S: '服务收费' }[row[column.columnAttributes.prop]] || ''}
                                </div>
                              )
                            }
                          },
                          {
                            columnAttributes: {
                              label: '适用品牌',
                              prop: 'brandRelaName',
                              width: 160
                            }
                          },
                          {
                            columnAttributes: {
                              label: '适用产品大类',
                              prop: 'productRelaName',
                              width: 160
                            }
                          },
                          ...this.commonColumns
                        ]}
                        tableData={this.formData.items_p}
                        tableAttributes={{
                          size: 'mini',
                          border: true
                        }}
                      />
                    ]
                  : null}
              </div>
            )
          }
        }
      ]
    },
    commonColumns() {
      return [
        {
          columnAttributes: {
            label: '销售价格（元）',
            prop: 'normAmount'
          },
          render: (h, { row, column, index }) => {
            return this.isEditIndex == index ? (
              <div class="redbordererr">
                <el-form-item
                  label=""
                  lebel-width="0px"
                  prop={`${this.activeName}.${index}.${column.columnAttributes.prop}`}
                  rules={required}
                >
                  <el-input
                    value={row[column.columnAttributes.prop]}
                    onInput={val => {
                      row[column.columnAttributes.prop] = val
                    }}
                    type="number"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </div>
            ) : (
              <div style="padding:0 6px">{row[column.columnAttributes.prop]}</div>
            )
          }
        },
        // {
        //   columnAttributes: {
        //     label: '师傅分账金额（元）',
        //     prop: 'workerAmount',
        //     width: 160
        //   },
        //   render: (h, { row, column, index }) => {
        //     return this.isEditIndex == index ? (
        //       <div class="redbordererr">
        //         <el-form-item
        //           label=""
        //           lebel-width="0px"
        //           prop={`${this.activeName}.${index}.${column.columnAttributes.prop}`}
        //           rules={required}
        //         >
        //           <el-input
        //             value={row[column.columnAttributes.prop]}
        //             onInput={val => {
        //               row[column.columnAttributes.prop] = val
        //             }}
        //             type="number"
        //             placeholder="请输入"
        //           ></el-input>
        //         </el-form-item>
        //       </div>
        //     ) : (
        //       <div style="padding:0 6px">{row[column.columnAttributes.prop]}</div>
        //     )
        //   }
        // }, {
        //   columnAttributes: {
        //     label: '商户分账金额（元）',
        //     prop: 'websitAmount',
        //     width: 160
        //   },
        //   render: (h, { row, column, index }) => {
        //     return this.isEditIndex == index ? (
        //       <div class="redbordererr">
        //         <el-form-item
        //           label=""
        //           lebel-width="0px"
        //           prop={`${this.activeName}.${index}.${column.columnAttributes.prop}`}
        //           rules={required}
        //         >
        //           <el-input
        //             value={row[column.columnAttributes.prop]}
        //             onInput={val => {
        //               row[column.columnAttributes.prop] = val
        //             }}
        //             type="number"
        //             placeholder="请输入"
        //           ></el-input>
        //         </el-form-item>
        //       </div>
        //     ) : (
        //       <div style="padding:0 6px">{row[column.columnAttributes.prop]}</div>
        //     )
        //   }
        // },
        {
          columnAttributes: {
            label: '操作',
            fixed: 'right',
            width: 140
          },
          render: (h, { row, column, index }) => {
            return (
              <div style="padding:0 6px" class="operation-btns">
                {[
                  this.isEditIndex == index ? (
                    <el-button
                      type="text"
                      onClick={() => {
                        this.verifyBtn()
                      }}
                    >
                      确认
                    </el-button>
                  ) : null,
                  this.isEditIndex == -1 ? (
                    <el-button
                      type="text"
                      onClick={() => {
                        this.isEditIndex = index
                      }}
                    >
                      编辑
                    </el-button>
                  ) : null,
                  <el-button
                    type="text"
                    onClick={() => {
                      this.formData?.[this.activeName]?.splice(index, 1)
                      if (index == this.isEditIndex) {
                        this.isEditIndex = -1
                      }
                    }}
                  >
                    删除
                  </el-button>
                ]}
              </div>
            )
          }
        }
      ]
    },
    logList() {
      return [
        {
          md: 24,
          isShow: true,
          name: 'slot-component',
          formItemAttributes: {
            label: '',
            prop: '',
            'label-width': '0px'
          },
          render: (h, { props, onInput }) => {
            var { value } = props
            return (
              <zj-table
                columns={[
                  {
                    columnAttributes: {
                      label: '操作类型',
                      prop: 'typeText'
                    }
                  },
                  {
                    columnAttributes: {
                      label: '操作内容',
                      prop: 'content'
                    }
                  },
                  {
                    columnAttributes: {
                      label: '操作人',
                      prop: 'createBy'
                    }
                  },
                  {
                    columnAttributes: {
                      label: '操作时间',
                      prop: 'createTime'
                    }
                  }
                ]}
                tableData={this.formData.operatorLogList}
                tableAttributes={{
                  size: 'mini',
                  border: true
                }}
              />
            )
          }
        }
      ]
    }
  },
  methods: {
    // 列表请求函数
    getList: orderEnginbaseList,
    // 列表导出函数
    exportList: orderEnginBaseListExport,
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      return defaultData
    },
    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data
    },
    handleClose() {
      this.$refs?.formRef?.resetFields()
      this.$data.formData = this.$options.data().formData
      this.activeName = 'items_m'
    },
    // 打开弹窗
    openForm() {
      this.isEditIndex = -1
      // 获取辅材下拉数据
      materialNormList({ pageNum: 1, pageSize: -1, params: [{ param: 'a.status', compare: '=', value: 'ON' }] }).then(
        res => {
          this.fucaiSel = res.data.records
        }
      )
      // 获取配件下拉数据
      listPageV2({
        pageNum: 1,
        pageSize: -1,
        params: [
          { param: 'a.status', compare: '=', value: 'ON' },
          { param: 'a.norm_type', compare: '=', value: 'M' }
        ]
      }).then(res => {
        this.peijianSel = res.data.records
      })
    },
    quedingbaocun(removeTab) {
      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
        if (valid) {
          orderEnginBaseSave({
            ...this.formData,
            items: [...this.formData.items_m, ...this.formData.items_p]
          }).then(res => {
            this.$message({
              type: 'success',
              message: '保存成功'
            })
            this.handleClose()
            this.$refs.pageRef.refreshList()
            removeTab && removeTab()
          })
        }
      })
    },
    // 操作按钮
    operation() {
      return this.operationBtn({
        detail: {
          click: ({ row, index, column }) => {
            this.$refs.tabPage.addTab({
              // 对应显示的模块
              activeKey: 'detail',
              // 唯一标识
              key: 'detail',
              // 页签名称
              label: '详情',
              // 打开时事件
              triggerEvent: () => {
                this.activeType_e = 'jbzl'
                this.handleClose()
                this.$nextTick(() => {
                  orderEnginBaseDetail({ id: row.id }).then(res => {
                    Object.assign(this.formData, res.data, {
                      items_m: (res.data.items || []).filter(item => item.goodsType == 'M'),
                      items_p: (res.data.items || []).filter(item => item.goodsType == 'P')
                    })
                    this.getinitlbslist()
                    this.openForm()
                  })
                })
              },
              // 关闭时事件
              closeEvent: () => {}
            })
          }
        },
        orderDetail: {
          click: ({ row, index, column }) => {
            this.$router.push({
              name: window.isWorkOrderPoolPath,
              params: {
                pageName: row.projectNo,
                pageType: 'projectNo',
                pageCode: row.projectNo
              }
            })
          }
        }
      })
    },
    // 获取省市区街道
    getinitlbslist() {
      // 初始化请求省市区街道下拉选项数据
      lbsAmapRegion({ pid: 0 }).then(res => {
        this.provinceList = res.data
        if (this.formData.provinceId) {
          var item = this.provinceList.find(item => item.name === this.formData.provinceId)
          if (item) {
            this.formData.province = item.name
          }
          lbsAmapRegion({ pid: this.formData.provinceId }).then(res => {
            this.cityList = res.data
            if (this.formData.cityId) {
              var item2 = this.cityList.find(item => item.name === this.formData.cityId)
              if (item2) {
                this.formData.city = item2.name
              }
              lbsAmapRegion({ pid: this.formData.cityId }).then(res => {
                this.areaList = res.data
                if (this.formData.areaId) {
                  var item3 = this.areaList.find(item => item.name === this.formData.areaId)
                  if (item3) {
                    this.formData.city = item2.name
                  }
                  lbsAmapRegion({ pid: this.formData.areaId }).then(res => {
                    this.streetList = res.data
                    if (this.formData.streetId) {
                      var item4 = this.streetList.find(item => item.name === this.formData.streetId)
                      if (item4) {
                        this.formData.street = item4.name
                      }
                    }
                  })
                }
              })
            }
          })
        }
      })
    },
    delDataK(num) {
      if (num <= 1) {
        // 删除市
        this.formData.cityId = ''
        this.formData.city = ''
        // 删除市选项
        this.cityList = []
      }
      if (num <= 2) {
        // 删除区
        this.formData.areaId = ''
        this.formData.area = ''
        // 删除区选项
        this.areaList = []
      }
      if (num <= 3) {
        // 删除街道
        this.formData.streetId = ''
        this.formData.street = ''
        // 删除街道选项
        this.streetList = []
      }
      // 删除gps地址
      this.formData.address = ''
    },
    delItemKey(num, row) {
      if (num <= 1) {
        row.goodsCategoryId = ''
        row.goodsCategoryName = ''
      }
      if (num <= 2) {
        row.goodsId = ''
        row.goodsName = ''
      }
      if (num <= 3) {
        row.brandRelaId = ''
        row.brandRelaName = ''
        row.goodsBarcodeId = ''
        row.goodsCode = ''
        row.goodsSpecification = ''
        row.goodsStockUnit = ''
        row.normType = ''
        row.orderEnginBaseId = ''
        row.productCreateBy = ''
        row.productCreateTime = ''
        row.productRelaId = ''
        row.productRelaName = ''
        row.productUpdateBy = ''
        row.productUpdateTime = ''
      }
    },
    arrQC(list, qz = { label: '', value: '' }) {
      var obj = {}
      for (var item of list) {
        obj[item[qz?.value || 'value']] = item
      }
      return Object.keys(obj).map(key => {
        return {
          data: obj[key],
          value: key,
          label: obj[key][qz?.label || 'label']
        }
      })
    },
    addItem(goodsType) {
      if (this.isEditIndex > -1) {
        this.$refs.formRef.validateField(this.getVfyKey(this.isEditIndex), (valid, invalidFields, errLabels) => {
          if (valid) {
            this.formData[this.activeName].unshift({
              brandRelaId: '',
              brandRelaName: '',
              goodsBarcodeId: '',
              goodsCategoryId: '',
              goodsCategoryName: '',
              goodsCode: '',
              goodsId: '',
              goodsName: '',
              goodsSpecification: '',
              goodsStockUnit: '',
              goodsType: goodsType,
              normAmount: '',
              normType: '',
              orderEnginBaseId: '',
              parentCategoryId: '',
              parentCategoryName: '',
              productCreateBy: '',
              productCreateTime: '',
              productRelaId: '',
              productRelaName: '',
              productUpdateBy: '',
              productUpdateTime: ''
              // "websitAmount": '',
              // "workerAmount": ''
            })
            this.isEditIndex = 0
          }
        })
      } else {
        this.formData[this.activeName].unshift({
          brandRelaId: '',
          brandRelaName: '',
          goodsBarcodeId: '',
          goodsCategoryId: '',
          goodsCategoryName: '',
          goodsCode: '',
          goodsId: '',
          goodsName: '',
          goodsSpecification: '',
          goodsStockUnit: '',
          goodsType: goodsType,
          normAmount: '',
          normType: '',
          orderEnginBaseId: '',
          parentCategoryId: '',
          parentCategoryName: '',
          productCreateBy: '',
          productCreateTime: '',
          productRelaId: '',
          productRelaName: '',
          productUpdateBy: '',
          productUpdateTime: ''
          // "websitAmount": '',
          // "workerAmount": ''
        })
        this.isEditIndex = 0
      }
    },
    getVfyKey() {
      return [
        `${this.activeName}.${this.isEditIndex}.parentCategoryId`,
        `${this.activeName}.${this.isEditIndex}.goodsCategoryId`,
        `${this.activeName}.${this.isEditIndex}.goodsId`,
        `${this.activeName}.${this.isEditIndex}.normAmount`
        // `${this.activeName}.${this.isEditIndex}.workerAmount`,
        // `${this.activeName}.${this.isEditIndex}.websitAmount`,
      ]
    },
    verifyBtn() {
      this.$refs.formRef.validateField(this.getVfyKey(this.isEditIndex), (valid, invalidFields, errLabels) => {
        if (valid) {
          this.isEditIndex = -1
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>