kd-aiot-frontend/src/views/material/BOMmanage/components/workingProcedure.vue

<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    width="85%"
  >
    <el-card shadow="never">
      <header-title title="工序信息"></header-title>
      <el-form label-width="100px" ref="form" :model="rowData">
        <el-row>
          <el-col :span="6" label-width="100px">
            <el-form-item label="编码" prop="type">
              <el-input
                disabled
                placeholder="工序编码"
                v-model="rowData.code"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" label-width="100px">
            <el-form-item label="名称" prop="type">
              <el-input
                disabled
                placeholder="工序名称"
                v-model="rowData.controlName"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-tabs
        v-model="activeName"
        class="tab-box"
        type="border-card"
        @tab-click="tabsChange"
      >
        <el-tab-pane label="工艺参数" name="工艺参数">
          <ele-pro-table
            ref="table"
            :datasource="datasource"
            :immediate="true"
            :need-page="false"
            :columns="columns"
          >
            <!-- 表头工具栏 -->
            <template v-if="!isView" v-slot:toolbar>
              <el-button
                size="small"
                icon="el-icon-plus"
                class="ele-btn-icon"
                type="primary"
                @click.native="openParam('工艺')"
                >添加参数</el-button
              >
            </template>

            <template v-slot:sort="{ row }">
              <div v-if="isView">{{ row.sort }}</div>
              <el-input v-else v-model="row.sort"></el-input>
            </template>

            <!-- 默认值 -->
            <template v-slot:defaultValue="{ row }">
              <div v-if="isView">
                {{ row.defaultValue }}
              </div>
              <div v-else>
                <el-input
                  v-if="
                    row.textType == 1 ||
                    row.textType == 4 ||
                    row.textType == 3 ||
                    row.textType == 5
                  "
                  v-model="row.defaultValue"
                  placeholder="请输入"
                ></el-input>
                <el-select
                  v-if="row.textType == 2"
                  v-model="row.defaultValue"
                  placeholder="请选择"
                >
                  <el-option label="TRUE" :value="'TRUE'" />
                  <el-option label="FALSE" :value="'FALSE'" />
                </el-select>
              </div>
            </template>

            <!-- 上限 -->
            <template v-slot:maxValue="{ row }">
              <div v-if="isView">
                {{ row.maxValue }}
              </div>
              <div v-else>
                <el-input
                  v-if="row.textType == 3"
                  v-model="row.maxValue"
                  placeholder="请输入"
                ></el-input>
              </div>
            </template>
            <!-- 下限 -->
            <template v-slot:minValue="{ row }">
              <div v-if="isView">
                {{ row.minValue }}
              </div>
              <div v-else>
                <el-input
                  v-if="row.textType == 3"
                  v-model="row.minValue"
                  placeholder="请输入"
                ></el-input>
              </div>
            </template>

            <!-- 单位 -->
            <template v-slot:unitName="{ row }">
              <div v-if="isView">
                {{ row.unitName }}
              </div>
              <div v-else>
                <DictSelection
                  v-if="row.textType != 2 && row.textType != 5"
                  dictName="工艺参数单位"
                  clearable
                  filterable
                  v-model="row.unitName"
                >
                </DictSelection>

                <span v-if="row.textType == 5"> h(小时)</span>
              </div>
            </template>

            <!-- 操作列 -->
            <template v-slot:action="{ row }">
              <el-popconfirm
                class="ele-action"
                title="确定要删除当前参数吗？"
                @confirm="remove(row, '工艺')"
              >
                <template v-slot:reference>
                  <el-link
                    type="danger"
                    :underline="false"
                    icon="el-icon-delete"
                  >
                    删除
                  </el-link>
                </template>
              </el-popconfirm>
            </template>
          </ele-pro-table>
        </el-tab-pane>
        <el-tab-pane label="质检参数" name="质检参数">
          <ele-pro-table
            ref="qualityTable"
            :datasource="datasource"
            :immediate="true"
            :need-page="false"
            :columns="columns"
          >
            <!-- 表头工具栏 -->
            <template v-if="!isView" v-slot:toolbar>
              <el-button
                size="small"
                icon="el-icon-plus"
                class="ele-btn-icon"
                type="primary"
                @click.native="openParam('质检')"
                >添加参数</el-button
              >
            </template>

            <template v-slot:sort="{ row }">
              <div v-if="isView">{{ row.sort }}</div>
              <el-input v-else v-model="row.sort"></el-input>
            </template>

            <!-- 默认值 -->
            <template v-slot:defaultValue="{ row }">
              <div v-if="isView">
                {{ row.defaultValue }}
              </div>
              <div v-else>
                <el-input
                  v-if="
                    row.textType == 1 ||
                    row.textType == 4 ||
                    row.textType == 3 ||
                    row.textType == 5
                  "
                  v-model="row.defaultValue"
                  placeholder="请输入"
                ></el-input>
                <el-select
                  v-if="row.textType == 2"
                  v-model="row.defaultValue"
                  placeholder="请选择"
                >
                  <el-option label="TRUE" :value="'TRUE'" />
                  <el-option label="FALSE" :value="'FALSE'" />
                </el-select>
              </div>
            </template>

            <!-- 上限 -->
            <template v-slot:maxValue="{ row }">
              <div v-if="isView">
                {{ row.maxValue }}
              </div>
              <div v-else>
                <el-input
                  v-if="row.textType == 3"
                  v-model="row.maxValue"
                  placeholder="请输入"
                ></el-input>
              </div>
            </template>
            <!-- 下限 -->
            <template v-slot:minValue="{ row }">
              <div v-if="isView">
                {{ row.minValue }}
              </div>
              <div v-else>
                <el-input
                  v-if="row.textType == 3"
                  v-model="row.minValue"
                  placeholder="请输入"
                ></el-input>
              </div>
            </template>

            <!-- 单位 -->
            <template v-slot:unitName="{ row }">
              <div v-if="isView">
                {{ row.unitName }}
              </div>
              <div v-else>
                <DictSelection
                  v-if="row.textType != 2 && row.textType != 5"
                  dictName="工艺参数单位"
                  clearable
                  filterable
                  v-model="row.unitName"
                >
                </DictSelection>

                <span v-if="row.textType == 5"> h(小时)</span>
              </div>
            </template>

            <!-- 操作列 -->
            <template v-slot:action="{ row }">
              <el-popconfirm
                class="ele-action"
                title="确定要删除当前参数吗？"
                @confirm="remove(row, '工艺')"
              >
                <template v-slot:reference>
                  <el-link
                    type="danger"
                    :underline="false"
                    icon="el-icon-delete"
                  >
                    删除
                  </el-link>
                </template>
              </el-popconfirm>
            </template>
          </ele-pro-table>
        </el-tab-pane>
        <el-tab-pane label="生产节拍" name="生产节拍">
          <el-form label-width="100px" ref="form" :model="beatParam">
            <el-row>
              <el-col :span="16" label-width="100px">
                <el-form-item label="节拍生产数量" prop="beatNum">
                  <el-input
                    v-if="!isView"
                    placeholder=""
                    v-model="beatParam.beatNum"
                  ></el-input>
                  <div v-else>{{ beatParam.beatNum }}</div>
                </el-form-item>
              </el-col>

              <el-col :span="8" label-width="100px">
                <el-form-item label="单位" prop="beatUnit">
                  <el-input
                    v-if="!isView"
                    placeholder=""
                    v-model="beatParam.beatUnit"
                  ></el-input>
                  <div v-else>{{ beatParam.beatUnit }}</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="16" label-width="100px">
                <el-form-item label="对应物料数量" prop="materielNum">
                  <el-input
                    v-if="!isView"
                    placeholder=""
                    v-model="beatParam.materielNum"
                  ></el-input>
                  <div v-else>{{ beatParam.materielNum }}</div>
                </el-form-item>
              </el-col>

              <el-col :span="8" label-width="100px">
                <el-form-item label="单位" prop="materielUnit">
                  <el-input
                    v-if="!isView"
                    placeholder=""
                    v-model="beatParam.materielUnit"
                  ></el-input>
                  <div v-else>{{ beatParam.materielUnit }}</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="16" label-width="100px">
                <el-form-item label="节拍时间" prop="beatTime">
                  <el-input
                    v-if="!isView"
                    placeholder=""
                    v-model="beatParam.beatTime"
                  ></el-input>
                  <div v-else>{{ beatParam.beatTime }}</div>
                </el-form-item>
              </el-col>

              <el-col :span="8" label-width="100px">
                <el-form-item label="单位" prop="beatTimeUnit">
                  <el-input
                    v-if="!isView"
                    placeholder=""
                    v-model="beatParam.beatTimeUnit"
                  ></el-input>
                  <div v-else>{{ beatParam.beatTimeUnit }}</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="16" label-width="100px">
                <el-form-item label="节拍准备时长" prop="name">
                  <el-input
                    v-if="!isView"
                    placeholder=""
                    v-model="beatParam.beatPrepareTime"
                  ></el-input>
                  <div v-else>{{ beatParam.beatPrepareTime }}</div>
                </el-form-item>
              </el-col>

              <el-col :span="8" label-width="100px">
                <el-form-item label="单位" prop="name">
                  <el-input
                    v-if="!isView"
                    placeholder=""
                    v-model="beatParam.beatPrepareUnit"
                  ></el-input>
                  <div v-else>{{ beatParam.beatPrepareUnit }}</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="16" label-width="100px">
                <el-form-item label="节拍休息时长" prop="name">
                  <el-input
                    v-if="!isView"
                    placeholder=""
                    v-model="beatParam.beatRestTime"
                  ></el-input>
                  <div v-else>{{ beatParam.beatRestTime }}</div>
                </el-form-item>
              </el-col>

              <el-col :span="8" label-width="100px">
                <el-form-item label="单位" prop="name">
                  <el-input
                    v-if="!isView"
                    placeholder=""
                    v-model="beatParam.beatRestUnit"
                  ></el-input>
                  <div v-else>{{ beatParam.beatRestUnit }}</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24" label-width="100px">
                <el-form-item label="备注" prop="remark">
                  <el-input
                    v-if="!isView"
                    placeholder=""
                    v-model="beatParam.remark"
                    type="textarea"
                    :rows="4"
                  ></el-input>
                  <div v-else>{{ beatParam.remark }}</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8" label-width="100px">
                <el-form-item label="添加人" prop="name">
                  <el-input
                    v-if="!isView"
                    placeholder=""
                    disabled
                    v-model="beatParam.createName"
                  ></el-input>
                  <div v-else>{{ beatParam.createName }}</div>
                </el-form-item>
              </el-col>

              <el-col :span="8" label-width="100px">
                <el-form-item label="添加时间" prop="name">
                  <el-input
                    v-if="!isView"
                    placeholder=""
                    disabled
                    v-model="beatParam.createTime"
                  ></el-input>
                  <div v-else>{{ beatParam.createTime }}</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8" label-width="100px">
                <el-form-item label="修改人" prop="name">
                  <el-input
                    v-if="!isView"
                    placeholder=""
                    disabled
                    v-model="beatParam.updateName"
                  ></el-input>
                  <div v-else>{{ beatParam.updateName }}</div>
                </el-form-item>
              </el-col>

              <el-col :span="8" label-width="100px">
                <el-form-item label="最后修改时间" prop="name">
                  <el-input
                    v-if="!isView"
                    placeholder=""
                    disabled
                    v-model="beatParam.updateTime"
                  ></el-input>
                  <div v-else>{{ beatParam.updateTime }}</div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="标准工时" name="标准工时">
          <el-form label-width="100px" ref="form" :model="normalHours">
            <el-row>
              <el-col :span="16" label-width="100px">
                <el-form-item label="标准时长" prop="type">
                  <el-input
                    v-if="!isView"
                    placeholder="标准时长"
                    v-model="normalHours.time"
                  ></el-input>
                  <div v-else>{{ normalHours.time }}</div>
                </el-form-item>
              </el-col>
              <el-col :span="8" label-width="100px">
                <el-form-item label="单位" prop="type">
                  <el-input
                    v-if="!isView"
                    placeholder="单位"
                    v-model="normalHours.unit"
                  ></el-input>
                  <div v-else>{{ normalHours.unit }}</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24" label-width="100px">
                <el-form-item label="备注" prop="remark">
                  <el-input
                    v-if="!isView"
                    placeholder=""
                    v-model="normalHours.remark"
                    type="textarea"
                    :rows="4"
                  ></el-input>
                  <div v-else>{{ normalHours.remark }}</div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="材料定额" name="材料定额">
          <ele-pro-table
            ref="materialTable"
            :columns="columns1"
            :datasource="datasource"
            :need-page="false"
            :immediate="true"
          >
            <!-- 表头工具栏 -->
            <template v-if="!isView" v-slot:toolbar>
              <el-button type="primary" @click="add">添加</el-button>
              <div class="toolbar_box">
                <div
                  ><span>基本数量</span>
                  <el-input placeholder="请输入" v-model.number="baseCount">
                  </el-input>
                  <DictSelection dictName="计量单位" v-model="baseCountUnit"
                /></div>
              </div>
            </template>
            <template v-slot:action="{ row, $index }">
              <el-link type="primary" @click="handleDel(row, $index)"
                >删除</el-link
              >
            </template>
            <template v-slot:subCode="{ row }">
              <div v-if="isView">{{ row.subCode }}</div>
              <el-input
                v-else
                v-model="row.subCode"
                placeholder="请输入"
              ></el-input>
            </template>

            <template v-slot:isReworkBom="{ row }">
              <div v-if="isView">{{ isReworkBom[row.isReworkBom] }}</div>
              <div v-else>
                <el-select v-model="row.isReworkBom">
                  <el-option
                    v-for="item in isReworkBomList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
            </template>

            <template v-slot:unit="{ row }">
              <div v-if="isView">{{ row.unit }}</div>
              <div v-else>
                <DictSelection
                  dictName="计量单位"
                  v-model="row.unit"
                ></DictSelection>
              </div>
            </template>

            <template v-slot:count="{ row }">
              <div v-if="isView">{{ row.count }}</div>
              <el-input
                v-else
                v-model="row.count"
                placeholder="请输入"
                @input="
                  (value) =>
                    (row.count = value.replace(
                      /^(-)*(\d+)\.(\d\d\d\d\d\d).*$/,
                      '$1$2.$3'
                    ))
                "
              ></el-input>
            </template>

            <template v-slot:categoryName="{ row, $index }">
              <div v-if="isView">{{ row.categoryName }}</div>
              <div v-else
                ><el-input
                  :value="row.categoryName"
                  placeholder="请选择"
                  @click.native="categorySelect(row, $index)"
                ></el-input
              ></div>
            </template>

            <template v-slot:bomArtFiles="{ row }">
              <div v-if="isView">附件</div>
              <div v-else
                ><div class="downLoad">
                  <fileUpload
                    v-model="filedList"
                    :show-file-list="false"
                    module="main"
                    @input="uploadedSuccess($event, row)"
                    :showLib="false"
                    :limit="1"
                  />
                  <div v-if="row.bomArtFiles">
                    <el-button
                      style="margin-left: 10px"
                      size="mini"
                      type="primary"
                      @click="downloadFile(row.bomArtFiles)"
                      >下载</el-button
                    >
                  </div></div
                >
              </div>
            </template>

            <template v-slot:remark="{ row }">
              <div v-if="isView">{{ row.remark }}</div>
              <el-input
                v-else
                v-model="row.remark"
                placeholder="请输入"
              ></el-input>
            </template>
          </ele-pro-table>
        </el-tab-pane>
        <el-tab-pane label="制造资源" name="制造资源">
          <ele-pro-table
            ref="resourceTable"
            :columns="columns1"
            :datasource="datasource"
            :need-page="false"
            :immediate="true"
          >
            <!-- 表头工具栏 -->
            <template v-if="!isView" v-slot:toolbar>
              <el-button type="primary" @click="add">添加</el-button>
            </template>
            <template v-slot:action="{ row, $index }">
              <el-link type="primary" @click="handleDel(row, $index)"
                >删除</el-link
              >
            </template>
            <template v-slot:subCode="{ row }">
              <div v-if="isView">{{ row.subCode }}</div>
              <el-input
                v-else
                v-model="row.subCode"
                placeholder="请输入"
              ></el-input>
            </template>

            <template v-slot:isReworkBom="{ row }">
              <div v-if="isView">{{ isReworkBom[row.isReworkBom] }}</div>
              <div v-else>
                <el-select v-model="row.isReworkBom">
                  <el-option
                    v-for="item in isReworkBomList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
            </template>

            <template v-slot:unit="{ row }">
              <div v-if="isView">{{ row.unit }}</div>
              <div v-else>
                <DictSelection
                  dictName="计量单位"
                  v-model="row.unit"
                ></DictSelection>
              </div>
            </template>

            <template v-slot:count="{ row }">
              <div v-if="isView">{{ row.count }}</div>
              <el-input
                v-else
                v-model="row.count"
                placeholder="请输入"
                @input="
                  (value) =>
                    (row.count = value.replace(
                      /^(-)*(\d+)\.(\d\d\d\d\d\d).*$/,
                      '$1$2.$3'
                    ))
                "
              ></el-input>
            </template>

            <template v-slot:categoryName="{ row, $index }">
              <div v-if="isView">{{ row.categoryName }}</div>
              <div v-else
                ><el-input
                  :value="row.categoryName"
                  placeholder="请选择"
                  @click.native="categorySelect(row, $index)"
                ></el-input
              ></div>
            </template>

            <template v-slot:bomArtFiles="{ row }">
              <div v-if="isView">附件</div>
              <div v-else
                ><div class="downLoad">
                  <fileUpload
                    v-model="filedList"
                    :show-file-list="false"
                    module="main"
                    @input="uploadedSuccess($event, row)"
                    :showLib="false"
                    :limit="1"
                  />
                  <div v-if="row.bomArtFiles">
                    <el-button
                      style="margin-left: 10px"
                      size="mini"
                      type="primary"
                      @click="downloadFile(row.bomArtFiles)"
                      >下载</el-button
                    >
                  </div></div
                >
              </div>
            </template>

            <template v-slot:remark="{ row }">
              <div v-if="isView">{{ row.remark }}</div>
              <el-input
                v-else
                v-model="row.remark"
                placeholder="请输入"
              ></el-input>
            </template>
          </ele-pro-table>
        </el-tab-pane>
        <el-tab-pane label="替代料" name="替代料">
          <ele-pro-table
            ref="replaceMaterialTable"
            :columns="columns1"
            :datasource="datasource"
            :need-page="false"
            :immediate="true"
          >
            <!-- 表头工具栏 -->
            <template v-if="!isView" v-slot:toolbar>
              <el-button type="primary" @click="add">添加</el-button>
            </template>
            <template v-slot:action="{ row, $index }">
              <el-link type="primary" @click="handleDel(row, $index)"
                >删除</el-link
              >
            </template>
            <template v-slot:subCode="{ row }">
              <div v-if="isView">{{ row.subCode }}</div>
              <el-input
                v-else
                v-model="row.subCode"
                placeholder="请输入"
              ></el-input>
            </template>

            <template v-slot:isReworkBom="{ row }">
              <div v-if="isView">{{ isReworkBom[row.isReworkBom] }}</div>
              <div v-else>
                <el-select v-model="row.isReworkBom">
                  <el-option
                    v-for="item in isReworkBomList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
            </template>

            <template v-slot:unit="{ row }">
              <div v-if="isView">{{ row.unit }}</div>
              <div v-else>
                <DictSelection
                  dictName="计量单位"
                  v-model="row.unit"
                ></DictSelection>
              </div>
            </template>

            <template v-slot:count="{ row }">
              <div v-if="isView">{{ row.count }}</div>
              <el-input
                v-else
                v-model="row.count"
                placeholder="请输入"
                @input="
                  (value) =>
                    (row.count = value.replace(
                      /^(-)*(\d+)\.(\d\d\d\d\d\d).*$/,
                      '$1$2.$3'
                    ))
                "
              ></el-input>
            </template>

            <template v-slot:categoryName="{ row, $index }">
              <div v-if="isView">{{ row.categoryName }}</div>
              <div v-else
                ><el-input
                  :value="row.categoryName"
                  placeholder="请选择"
                  @click.native="categorySelect(row, $index)"
                ></el-input
              ></div>
            </template>

            <template v-slot:bomArtFiles="{ row }">
              <div v-if="isView">附件</div>
              <div v-else
                ><div class="downLoad">
                  <fileUpload
                    v-model="filedList"
                    :show-file-list="false"
                    module="main"
                    @input="uploadedSuccess($event, row)"
                    :showLib="false"
                    :limit="1"
                  />
                  <div v-if="row.bomArtFiles">
                    <el-button
                      style="margin-left: 10px"
                      size="mini"
                      type="primary"
                      @click="downloadFile(row.bomArtFiles)"
                      >下载</el-button
                    >
                  </div></div
                >
              </div>
            </template>

            <template v-slot:remark="{ row }">
              <div v-if="isView">{{ row.remark }}</div>
              <el-input
                v-else
                v-model="row.remark"
                placeholder="请输入"
              ></el-input>
            </template>
          </ele-pro-table>
        </el-tab-pane>
        <el-tab-pane label="工种" name="工种">
          <ele-pro-table
            ref="jobTable"
            :columns="jobColumns"
            :datasource="datasource"
            row-key="id"
          >
            <!-- 表头工具栏 -->
            <template v-slot:toolbar>
              <el-button
                size="small"
                type="primary"
                icon="el-icon-plus"
                class="ele-btn-icon"
                @click="addJob"
                >新增</el-button
              >
            </template>
            <template v-slot:action="{ row, $index }">
              <el-link type="primary" @click="handleDel(row, $index)"
                >删除</el-link
              >
            </template>
          </ele-pro-table>
        </el-tab-pane>
        <el-tab-pane label="工艺文件" name="工艺文件">
          <ele-pro-table
            ref="fileTable"
            :columns="jobColumns1"
            :datasource="datasource"
            :need-page="false"
            :immediate="true"
          >
            <!-- 表头工具栏 -->
            <template v-if="!isView" v-slot:toolbar>
              <el-button type="primary" @click="addFile">添加</el-button>
            </template>
            <template v-slot:action="{ row, $index }">
              <el-link type="primary" @click="handleDel(row, $index)"
                >删除</el-link
              >
            </template>
            <template v-slot:type="{ row }">
              <div v-if="isView">{{ row.type }}</div>
              <el-input
                v-else
                v-model="row.type"
                placeholder="请输入"
              ></el-input>
            </template>

            <template v-slot:code="{ row }">
              <div v-if="isView">{{ row.code }}</div>
              <el-input
                v-else
                v-model="row.code"
                placeholder="请输入"
              ></el-input>
            </template>

            <template v-slot:versions="{ row }">
              <div v-if="isView">{{ row.versions }}</div>
              <el-input
                v-else
                v-model="row.versions"
                placeholder="请输入"
              ></el-input>
            </template>

            <template v-slot:status="{ row }">
              <div v-if="isView">{{
                statusOption.filter((item) => item.value == row.status)[0].label
              }}</div>
              <div v-else>
                <template>
                  <el-select v-model="row.status" placeholder="请选择">
                    <el-option
                      v-for="item in statusOption"
                      :label="item.label"
                      :value="item.value"
                      :key="item.value"
                    >
                    </el-option>
                  </el-select>
                </template>
              </div>
            </template>

            <template v-slot:path="{ row }">
              <div v-if="isView">附件</div>
              <div v-else
                ><div class="downLoad">
                  <fileUpload
                    v-model="jobFiledList"
                    :show-file-list="false"
                    module="main"
                    @input="uploadedJobSuccess($event, row)"
                    :showLib="false"
                    :limit="1"
                  />
                  <div v-if="row.path">
                    <el-button
                      style="margin-left: 10px"
                      size="mini"
                      type="primary"
                      @click="downloadFile(row.path)"
                      >下载</el-button
                    >
                  </div></div
                >
              </div>
            </template>

            <template v-slot:remark="{ row }">
              <div v-if="isView">{{ row.remark }}</div>
              <el-input
                v-else
                v-model="row.remark"
                placeholder="请输入"
              ></el-input>
            </template>
          </ele-pro-table>
        </el-tab-pane>

        <el-tab-pane label="标准产出" name="标准产出">
          <ele-pro-table
            ref="fileTable"
            :columns="jobColumns1"
            :datasource="datasource"
            :need-page="false"
            :immediate="true"
          >
            <!-- 表头工具栏 -->
            <template v-if="!isView" v-slot:toolbar>
              <el-button type="primary" @click="addFile">添加</el-button>
            </template>
            <template v-slot:action="{ row, $index }">
              <el-link type="primary" @click="handleDel(row, $index)"
                >删除</el-link
              >
            </template>
            <template v-slot:type="{ row }">
              <div v-if="isView">{{ row.type }}</div>
              <el-input
                v-else
                v-model="row.type"
                placeholder="请输入"
              ></el-input>
            </template>

            <template v-slot:code="{ row }">
              <div v-if="isView">{{ row.code }}</div>
              <el-input
                v-else
                v-model="row.code"
                placeholder="请输入"
              ></el-input>
            </template>

            <template v-slot:versions="{ row }">
              <div v-if="isView">{{ row.versions }}</div>
              <el-input
                v-else
                v-model="row.versions"
                placeholder="请输入"
              ></el-input>
            </template>

            <template v-slot:status="{ row }">
              <div v-if="isView">{{
                statusOption.filter((item) => item.value == row.status)[0].label
              }}</div>
              <div v-else>
                <template>
                  <el-select v-model="row.status" placeholder="请选择">
                    <el-option
                      v-for="item in statusOption"
                      :label="item.label"
                      :value="item.value"
                      :key="item.value"
                    >
                    </el-option>
                  </el-select>
                </template>
              </div>
            </template>

            <template v-slot:path="{ row }">
              <div v-if="isView">附件</div>
              <div v-else
                ><div class="downLoad">
                  <fileUpload
                    v-model="jobFiledList"
                    :show-file-list="false"
                    module="main"
                    @input="uploadedJobSuccess($event, row)"
                    :showLib="false"
                    :limit="1"
                  />
                  <div v-if="row.path">
                    <el-button
                      style="margin-left: 10px"
                      size="mini"
                      type="primary"
                      @click="downloadFile(row.path)"
                      >下载</el-button
                    >
                  </div></div
                >
              </div>
            </template>

            <template v-slot:remark="{ row }">
              <div v-if="isView">{{ row.remark }}</div>
              <el-input
                v-else
                v-model="row.remark"
                placeholder="请输入"
              ></el-input>
            </template>
          </ele-pro-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 选择工艺参数 -->
    <jobDialog ref="jobRef" @chooseModal="chooseJob"></jobDialog>
    <ParamModal ref="paramRefs" @chooseModal="chooseModal"></ParamModal>
    <ProductModal ref="productRefs" @changeProduct="determineChoose" />
    <ProductModalMultiple
      ref="productMultipleRefs"
      @selection="addProductList"
    ></ProductModalMultiple>

    <div class="btns">
      <el-button type="primary" size="small" @click="save">{{
        isView ? '确定' : '保存'
      }}</el-button>
      <el-button size="small" @click="handleClose">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import dictMixins from '@/mixins/dictMixins';
  import * as dayjs from 'dayjs';
  import { getFile } from '@/api/system/file';
  import fileUpload from '@/components/upload/fileUpload';
  import { workingProcedureUpdate } from '@/api/material/BOM';
  import ParamModal from '@/views/technology/productParam/components/ParamModal.vue';
  import ProductModal from '@/components/select/bom/ProductModal.vue';
  import ProductModalMultiple from './ProductModalMultiple.vue';
  import userSearch from './user-search.vue';
  import jobDialog from './jobDialog.vue';
  export default {
    components: {
      userSearch,
      ParamModal,
      fileUpload,
      ProductModal,
      jobDialog,
      ProductModalMultiple
    },
    mixins: [dictMixins],
    data() {
      return {
        baseCount: '',
        baseCountUnit: '',
        isView: false,
        filedList: [],
        jobFiledList: [],
        activeName: '工艺参数',
        attributeData: {},
        visible: false,
        title: '配置',
        form: {},
        statusOption: [
          {
            label: '启用',
            value: 1
          },
          {
            label: '停用',
            value: 0
          }
        ],
        isReworkBom: ['否', '是'],
        isReworkBomList: [
          { label: '否', value: 0 },
          { label: '是', value: 1 }
        ],
        // 表格列配置
        columns1: [],
        defaultColumns1: [
          {
            type: 'index',
            width: 55,
            align: 'center'
          },
          {
            label: '子项编号',
            prop: 'subCode',
            slot: 'subCode',
            action: 'subCode'
          },
          {
            label: '物料名称',
            prop: 'categoryName',
            slot: 'categoryName',
            action: 'categoryName'
          },
          {
            label: '是否回收料',
            prop: 'isReworkBom',
            slot: 'isReworkBom',
            action: 'isReworkBom'
          },
          {
            label: '编码',
            prop: 'categoryCode'
          },
          {
            label: '牌号',
            prop: 'brandNum'
          },
          {
            label: '型号',
            prop: 'modelType'
          },
          {
            label: '数量',
            slot: 'count',
            action: 'count'
          },
          {
            label: '单位',
            slot: 'unit',
            action: 'unit'
          },

          {
            label: '附件',
            slot: 'bomArtFiles',
            action: 'bomArtFiles',
            minWidth: 150
          },

          {
            label: '备注',
            slot: 'remark',
            action: 'remark'
          }
        ],
        columns: [],
        // 表格列配置
        defaultColumns: [
          {
            prop: 'sort',
            slot: 'sort',
            label: '排序',
            minWidth: 60
          },
          {
            prop: 'code',
            label: '参数编码',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },
          {
            prop: 'name',
            label: '参数名称',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },
          {
            align: 'center',
            prop: 'description',
            label: '文本描述',
            showOverflowTooltip: true,
            minWidth: 110
          },

          {
            prop: 'maxValue',
            slot: 'maxValue',
            label: '参数上限',
            align: 'center'
          },
          {
            prop: 'minValue',
            slot: 'minValue',
            label: '参数下限',
            align: 'center'
          },
          {
            prop: 'defaultValue',
            slot: 'defaultValue',
            label: '默认值',
            align: 'center'
          }
        ],
        levelOptions: [
          {
            label: '初级',
            value: '1'
          },
          {
            label: '中级',
            value: '2'
          },
          {
            label: '高级',
            value: '3'
          }
        ],
        // 表格列配置
        jobColumns: [
          {
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center'
          },
          {
            slot: 'type',
            label: '类型',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110,
            formatter: (_row) => {
              return this.getDictValue('工种类型', _row.type);
            }
          },
          {
            align: 'center',
            prop: 'code',
            label: '编码',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            slot: 'name',
            prop: 'name',
            label: '名称',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },
          {
            slot: 'level',
            prop: 'level',
            label: '等级',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110,
            formatter: (_row) => {
              return this.levelOptions.filter(
                (item) => _row.level == item.value
              )[0].label;
            }
          },
          {
            slot: 'hourCost',
            prop: 'hourCost',
            label: '标准工时费',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 260,
            align: 'center',
            resizable: false,
            slot: 'action',
            showOverflowTooltip: true
          }
        ],
        // 表格选中数据
        jobColumns1: [
          {
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center'
          },
          {
            slot: 'type',
            prop: 'type',
            label: '类型',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },
          {
            slot: 'code',
            prop: 'code',
            label: '编码',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },
          {
            slot: 'name',
            prop: 'name',
            label: '名称',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },
          {
            slot: 'path',
            prop: 'path',
            label: '附件',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 200
          },
          {
            slot: 'versions',
            prop: 'versions',
            label: '版本',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },
          {
            slot: 'status',
            prop: 'status',
            label: '状态',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },
          {
            prop: 'createName',
            label: '创建人',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },
          {
            prop: 'createTime',
            label: '创建时间',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 260,
            align: 'center',
            resizable: false,
            slot: 'action',
            showOverflowTooltip: true
          }
        ],

        rowData: {},
        treeData: {},
        currentIndex: 0,
        tableData: {},
        beatParam: {},
        normalHours: {}
      };
    },
    created() {
      this.requestDict('工种类型');
    },
    methods: {
      addFile() {
        let userInfo = JSON.parse(localStorage.getItem('info'));
        this.tableData.taskParam[this.currentIndex]['fileParam'].push({
          code: '',
          type: '',
          name: '',
          versions: '',
          name: '',
          status: 1,
          createName: userInfo.name,
          createTime: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
        });
        this.$refs.fileTable.setData(
          this.tableData.taskParam[this.currentIndex]['fileParam']
        );
      },
      addJob() {
        this.$refs.jobRef.open();
      },
      chooseJob(data) {
        this.$refs.jobTable.setData([
          ...data,
          ...this.$refs.jobTable.getData()
        ]);
        this.$set(
          this.tableData.taskParam[this.currentIndex],
          'aptitudeParam',
          this.$refs.jobTable.getData()
        );
      },
      determineChoose(title, row, idx) {
        let type = '';
        if (this.activeName === '材料定额') {
          type = 'materialQuota';
        } else if (this.activeName === '制造资源') {
          type = 'resource';
        } else if (this.activeName === '替代料') {
          type = 'replaceMaterial';
        }
        if (title == '选择物料') {
          this.$set(
            this.tableData.taskParam[this.currentIndex][type][idx],
            'categoryName',
            row.name
          );
          this.$set(
            this.tableData.taskParam[this.currentIndex][type][idx],
            'categoryId',
            row.id
          );
          this.$set(
            this.tableData.taskParam[this.currentIndex][type][idx],
            'categoryCode',
            row.code
          );
          this.$set(
            this.tableData.taskParam[this.currentIndex][type][idx],
            'unit',
            row.measuringUnit
          );
          this.$set(
            this.tableData.taskParam[this.currentIndex][type][idx],
            'weightUnit',
            row.weightUnit
          );
          this.$set(
            this.tableData.taskParam[this.currentIndex][type][idx],
            'brandNum',
            row.brandNum
          );
          this.$set(
            this.tableData.taskParam[this.currentIndex][type][idx],
            'modelType',
            row.modelType
          );
        }
      },
      uploadedSuccess(data, row) {
        row.bomArtFiles = data[0].storePath;
        this.filedList = [];
      },
      uploadedJobSuccess(data, row) {
        row.path = data[0].storePath;
        row.name = data[0].name;
        this.jobFiledList = [];
      },
      downloadFile(url) {
        getFile({ objectName: url }, '附件');
      },
      categorySelect(row, idx) {
        this.$refs.productRefs.open(row, '选择物料', '1', idx);
      },
      handleDel(row, index) {
        let type = '';
        if (this.activeName === '材料定额') {
          type = 'materialQuota';
        } else if (this.activeName === '制造资源') {
          type = 'resource';
        } else if (this.activeName === '替代料') {
          type = 'replaceMaterial';
        } else if (this.activeName === '工种') {
          type = 'aptitudeParam';
        } else if (this.activeName === '工艺文件') {
          type = 'fileParam';
        }
        this.tableData.taskParam[this.currentIndex][type].splice(index, 1);
      },
      addProductList(list) {
        console.log(list);
        let subCode = 0;
        let array = [];
        list.map((item, index) => {
          // let max = '';
          // if (
          //   this.tableData.taskParam[this.currentIndex]['materialQuota']
          //     .length > 0
          // ) {
          //   max = Number(
          //     Math.max(
          //       ...this.tableData.taskParam[this.currentIndex][
          //         'materialQuota'
          //       ].map((i) => i.subCode)
          //     )
          //   );
          //   subCode = max + index + 1;
          // } else {
          //   max = 1;
          //   subCode = max + index;
          // }
          let max = '';
          if (
            this.tableData.taskParam[this.currentIndex]['materialQuota']
              .length > 0
          ) {
            max =
              Math.max(
                ...this.tableData.taskParam[this.currentIndex][
                  'materialQuota'
                ].map((i) => i.subCode)
              ) +
              10 * ++index +
              '';
            console.log(max);
            if (max.length < 4) {
              max = new Array(4 - max.length).fill('0').join('') + max;
            }
          } else {
            max = 10 * ++index + '';
            if (max.length < 4) {
              max = new Array(4 - max.length).fill('0').join('') + max;
            }
          }
          subCode = max.substring(0, max.length - 1) + '0';
          array.push({
            subCode,
            categoryId: item.categoryId,
            categoryName: item.name,
            categoryCode: item.categoryCode,
            isReworkBom: 0,
            brandNum: item.brandNum,
            weightUnit: item.weightUnit,
            count: '',
            modelType: item.modelType,
            unit: item.measuringUnit
          });
        });
        console.log(array);
        this.tableData.taskParam[this.currentIndex].materialQuota =
          this.tableData.taskParam[this.currentIndex].materialQuota.concat(
            array
          );
        console.log(this.tableData.taskParam[this.currentIndex].materialQuota);
        this.$refs.materialTable.setData(
          this.tableData.taskParam[this.currentIndex].materialQuota
        );
      },
      add() {
        let subCode = '0010';
        let type = '';
        if (this.activeName === '材料定额') {
          this.$refs.productMultipleRefs.open(1);
          return;
        } else if (this.activeName === '制造资源') {
          type = 'resource';
        } else if (this.activeName === '替代料') {
          type = 'replaceMaterial';
        }
        console.log(this.tableData.taskParam[this.currentIndex]);
        if (this.tableData.taskParam[this.currentIndex][type].length) {
          let max =
            Math.max(
              ...this.tableData.taskParam[this.currentIndex][type].map(
                (i) => i.subCode
              )
            ) +
            10 +
            '';

          if (max.length < 4) {
            max = new Array(4 - max.length).fill('0').join('') + max;
          }
          subCode = max.substring(0, max.length - 1) + '0';
        }

        this.tableData.taskParam[this.currentIndex][type].push({
          subCode,
          categoryId: '',
          categoryName: '',
          isReworkBom: 0,
          brandNum: '',
          count: '',
          modelType: '',
          unit: ''
        });
      },
      /* 表格数据源 */
      async datasource() {
        return [];
      },
      tabsChange() {
        console.log(this.activeName);
        console.log(this.tableData.taskParam[this.currentIndex]);
        if (this.activeName === '工艺参数') {
          // 工艺参数
          this.$refs.table.setData(
            this.tableData.taskParam[this.currentIndex].produceList || []
          );
        } else if (this.activeName === '质检参数') {
          // 质检参数
          this.$refs.qualityTable.setData(
            this.tableData.taskParam[this.currentIndex].qualityParam || []
          );
        } else if (this.activeName === '生产节拍') {
          console.log(this.tableData.taskParam[this.currentIndex].beatParam);
          this.beatParam =
            this.tableData.taskParam[this.currentIndex].beatParam || {};
        } else if (this.activeName === '标准工时') {
          this.normalHours =
            this.tableData.taskParam[this.currentIndex].normalHours || {};
        } else if (this.activeName === '材料定额') {
          this.$refs.materialTable.setData(
            this.tableData.taskParam[this.currentIndex].materialQuota || []
          );
        } else if (this.activeName === '制造资源') {
          this.$refs.resourceTable.setData(
            this.tableData.taskParam[this.currentIndex].resource || []
          );
        } else if (this.activeName === '替代料') {
          this.$refs.replaceMaterialTable.setData(
            this.tableData.taskParam[this.currentIndex].replaceMaterial || []
          );
        } else if (this.activeName === '工种') {
          if (
            JSON.stringify(
              this.tableData.taskParam[this.currentIndex].aptitudeParam
            ) == '{}'
          ) {
            this.tableData.taskParam[this.currentIndex].aptitudeParam = [];
            this.$refs.jobTable.setData([]);
          } else {
            this.$refs.jobTable.setData(
              this.tableData.taskParam[this.currentIndex].aptitudeParam
            );
          }
        } else if (this.activeName === '工艺文件') {
          if (
            JSON.stringify(
              this.tableData.taskParam[this.currentIndex].fileParam
            ) == '{}'
          ) {
            this.tableData.taskParam[this.currentIndex].fileParam = [];
            this.$refs.fileTable.setData([]);
          } else {
            this.$refs.fileTable.setData(
              this.tableData.taskParam[this.currentIndex].fileParam
            );
          }
        }
      },
      openParam(type) {
        let tableData = [];
        if (type === '工艺') {
          tableData = this.$refs.table.getData();
        } else {
          tableData = this.$refs.qualityTable.getData();
        }
        this.$refs.paramRefs.open(tableData);
      },
      chooseModal(data) {
        let dom = null;
        if (this.activeName === '工艺参数') {
          dom = this.$refs.table;
        } else if (this.activeName === '质检参数') {
          dom = this.$refs.qualityTable;
        }
        dom.setData([...data, ...dom.getData()]);
        this.$set(
          this.tableData.taskParam[this.currentIndex],
          this.activeName === '工艺参数' ? 'produceList' : 'qualityParam',
          dom.getData()
        );
      },
      remove(row, type) {
        let dom = null;
        if (type === '工艺') {
          dom = this.$refs.table;
        } else {
          dom = this.$refs.qualityTable;
        }
        const data = dom.getData();
        if (row.id) {
          dom.setData(data.filter((d) => d.id !== row.id));
        } else {
          dom.setData(data.filter((d) => d.paramId !== row.paramId));
        }
        this.$set(
          this.tableData.taskParam[this.currentIndex],
          type === '工艺' ? 'produceList' : 'qualityParam',
          dom.getData()
        );
      },
      open(rowData, treeData, tableData, isView) {
        this.columns = [];
        this.columns1 = [];
        this.isView = isView;
        if (!this.isView) {
          this.columns = this.defaultColumns.concat({
            columnKey: 'action',
            label: '操作',
            align: 'center',
            resizable: false,
            slot: 'action',
            showOverflowTooltip: true
          });

          this.columns1 = this.defaultColumns1.concat({
            action: 'action',
            slot: 'action',
            label: '操作'
          });
        } else {
          this.columns = this.defaultColumns;
          this.columns1 = this.defaultColumns1;
        }
        this.rowData = JSON.parse(JSON.stringify(rowData));
        this.treeData = JSON.parse(JSON.stringify(treeData));
        this.tableData = JSON.parse(JSON.stringify(tableData));
        this.currentIndex = tableData.taskParam.findIndex(
          (item) => item.id === rowData.id
        );
        this.activeName = '工艺参数';
        this.visible = true;
        setTimeout(() => {
          console.log(this.$refs);
          // 工艺参数
          this.$refs.table.setData(
            this.tableData.taskParam[this.currentIndex].produceList
          );
        }, 500);
      },
      handleClose() {
        this.visible = false;
        this.$refs.table.setSelectedRows([]);
        this.selection = [];
      },
      save() {
        if (this.isView) {
          this.handleClose();
        } else {
          // 保存生产节拍
          let userInfo = JSON.parse(localStorage.getItem('info'));
          this.beatParam.createName = userInfo.name;
          this.beatParam.createTime = dayjs(new Date()).format(
            'YYYY-MM-DD HH:mm:ss'
          );
          this.beatParam.updateName = userInfo.name;
          this.beatParam.updateTime = dayjs(new Date()).format(
            'YYYY-MM-DD HH:mm:ss'
          );
          this.tableData.taskParam[this.currentIndex].beatParam =
            this.beatParam;
          // 保存标准工时
          this.tableData.taskParam[this.currentIndex].normalHours =
            this.normalHours;
          // 保存材料定额
          this.tableData.taskParam[this.currentIndex].baseCount =
            this.baseCount;
          this.tableData.taskParam[this.currentIndex].baseCountUnit =
            this.baseCountUnit;
          workingProcedureUpdate({
            id: this.tableData.id,
            categoryId: this.treeData.categoryId,
            bomCategoryId: this.treeData.id,
            categoryCode: this.treeData.categoryCode,
            taskParam: this.tableData.taskParam
          }).then(() => {
            this.$message.success('保存成功');
            this.$emit('chooseProcess');
            this.handleClose();
          });
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .btns {
    text-align: center;
    padding: 10px 0;
  }
  .downLoad {
    display: flex;
  }
  .toolbar_box {
    float: right;
    margin-right: 10px;
    > div {
      display: flex;
      align-items: center;
      justify-content: center;
      > span {
        width: 150px;
      }
      > div {
        margin-left: 10px;
      }
    }
  }
</style>