<template>
  <div class="app-container">
    <el-card class="topCard">
      <div class="topDiv">
        <span style="margin-left: 10px">工位号：</span>
        <el-select v-model="stationNumberValue" placeholder="请选择工位号" filterable clearable size="small" style="width: 250px" @change="searchTable">
          <el-option
            v-for="item in stationNumber"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            size="mini"/>
        </el-select>
        <span style="margin-left: 10px">产品型号：</span>
        <el-select v-model="engineTypeValue" placeholder="请选择产品型号" filterable size="small" style="width: 150px" @change="searchTable">
          <el-option
            v-for="item in engineType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            size="mini"/>
        </el-select>
        <span style="margin-left: 10px">版本号：</span>
        <el-select v-model="version" placeholder="请选择版本号" size="small" style="width: 150px" @change="searchTable">
          <el-option
            v-for="item in versionList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            size="mini"/>
        </el-select>
        <el-button type="primary" plain size="small" icon="el-icon-search" @click="searchTable()">查询</el-button>
        <el-button :loading="exportLoading" :disabled="exportLoading" type="info" size="small" icon="el-icon-download" @click="exportExcel">Excel</el-button>
        <el-button type="primary" icon="el-icon-circle-plus-outline" size="small" @click="addTo">新增</el-button>
        <!--        <el-button type="success" size="small" plain icon="el-icon-document-copy" @click="copyOrder('form4')">复制工步</el-button>-->
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
        :cell-class-name="tableRowClassName"
        height="650px"
        class="main"
        tooltip-effect="dark"
        style="width: 100%"
        border
        size="mini">
        <el-table-column align="center" fixed label="工位号" width="100px">
          <template slot-scope="scope">
            {{ scope.row.工位号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" fixed label="版本号" width="80px">
          <template slot-scope="scope">
            {{ scope.row.版本号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" fixed width="60px" label="标记">
          <template slot-scope="scope">
            <el-image :src="scope.row.fileContentImg" style="width: 30px;height: 30px" fit="contain">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"/>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column align="center" fixed width="60px" label="序号">
          <template slot-scope="scope">
            {{ scope.row.工步号 }}
          </template>
        </el-table-column>
        <el-table-column header-align="center" fixed align="left" label="主要步骤" width="200px">
          <template slot-scope="scope">
            <div style="white-space: pre-line !important;">{{ scope.row.操作内容 }}</div>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="left" label="关键要素" width="200px">
          <template slot-scope="scope">
            <div style="white-space: pre-line !important;">{{ scope.row.技术要求 }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="工步类型" width="100px">
          <template slot-scope="scope">
            <el-tag v-if="parseInt(scope.row.工步属性) === 4" type="success" size="mini">{{ scope.row.工步属性名称 }}</el-tag>
            <el-tag v-else-if="parseInt(scope.row.工步属性) === 16" type="success" size="mini">{{ scope.row.工步属性名称 }}</el-tag>
            <el-tag v-else-if="parseInt(scope.row.工步属性) === 32" type="warning" size="mini">{{ scope.row.工步属性名称 }}</el-tag>
            <el-tag v-else-if="parseInt(scope.row.工步属性) === 34" type="danger" size="mini">{{ scope.row.工步属性名称 }}</el-tag>
            <el-tag v-else-if="parseInt(scope.row.工步属性) === 512" type="info" size="mini">{{ scope.row.工步属性名称 }}</el-tag>
            <el-tag v-else type="warning" size="mini">未定义的工步属性</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="关联物料" width="150px">
          <template slot-scope="scope">
            <div v-for="(materialCode, index) in parseMaterialCode(scope.row.关联物料)" :key="index">
              <a :title="materialCode.name" style="color: #409EFF;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-left: 3px;">【{{ index+1 }}】{{ materialCode.name }}</a>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="扭矩(Nm)" width="100px" >
          <template slot-scope="scope">
            <div style="white-space: pre-line !important;">{{ scope.row.扭矩 }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="等级" width="100px" >
          <template slot-scope="scope">
            <div style="white-space: pre-line !important;">{{ scope.row.等级 }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="选装代码" width="100px" >
          <template slot-scope="scope">
            <div style="white-space: pre-line !important;">{{ scope.row.选装代码 }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="数量" width="100px" >
          <template slot-scope="scope">
            <div style="white-space: pre-line !important;">{{ scope.row.数量 }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="辅料号" width="100px" >
          <template slot-scope="scope">
            <div style="white-space: pre-line !important;">{{ scope.row.辅料号 }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="辅料名称" width="100px" >
          <template slot-scope="scope">
            <div style="white-space: pre-line !important;">{{ scope.row.辅料名称 }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="工夹具名称" width="120px" >
          <template slot-scope="scope">
            <div style="white-space: pre-line !important;">{{ scope.row.工夹具名称 }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="工夹具型号/序列号" width="150px" >
          <template slot-scope="scope">
            <div style="white-space: pre-line !important;">{{ scope.row.工夹具型号_序列号 }}</div>
          </template>
        </el-table-column>

        <!--        <el-table-column header-align="center" align="left" label="指导图片" width="150px">-->
        <!--          <template slot-scope="scope">-->
        <!--            <div v-for="(image, index) in parseImages(scope.row.关联图片)" :key="index" style="display: flex;align-items: center;">-->
        <!--              <el-button type="text" icon="el-icon-delete" title="删除关联图片" style="color: #ff0000; margin: 0px;padding: 0" @click="deleteImg(image)" />-->
        <!--              <a :title="image.name" style="color: #409EFF;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-left: 3px;" @click="getStepImg(image)">【{{ index+1 }}】{{ image.name }}</a>-->
        <!--            </div>-->
        <!--          </template>-->
        <!--        </el-table-column>-->

        <el-table-column fixed="right" align="center" label="操作" width="100px">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="绑定物料" placement="bottom">
              <el-button v-if="parseInt(scope.row.工步属性) === 32" type="text" style="color: #f59a23" @click="editInformation_material(scope.row)"><i class="el-icon-s-grid"/></el-button>
            </el-tooltip>
            <!--            <el-tooltip class="item" effect="dark" content="绑定指导图片" placement="bottom">-->
            <!--              <el-button type="text" style="color: #8400ff" @click="editInformation_pic(scope.row)"><i class="el-icon-picture-outline"/></el-button>-->
            <!--            </el-tooltip>-->
            <el-button type="text" @click="editInformation(scope.row)"><i class="el-icon-edit"/></el-button>
            <el-button type="text" style="color: #ff0000" @click="deleteInformation(scope.row)"><i class="el-icon-delete"/></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog v-el-drag-dialog :visible.sync="dialogFormVisible" title="添加工步指导内容" center style="min-height: 200px;" width="800px">
      <el-form ref="form" :model="form" :rules="rules" label-position="right" label-width="90px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="工位号" prop="stationNumber" style="display: inline-block">
              <el-select v-model="form.stationNumber" placeholder="请选择工位号" size="small" style="width: 240px">
                <el-option
                  v-for="item in stationNumber"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  size="mini"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品型号" prop="moduleDescription" style="display: inline-block">
              <el-select v-model="form.moduleDescription" placeholder="请选择产品型号" size="small" style="width: 150px">
                <el-option
                  v-for="item in engineType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  size="mini"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="版本号" prop="version" style="display: inline-block">
              <el-select v-model="form.version" placeholder="请选择版本" size="small" style="width: 150px">
                <el-option
                  v-for="item in versionList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  size="mini"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="工步属性" prop="stepAttribute" style="display: inline-block">
              <el-select v-model="form.stepAttribute" placeholder="请选择工步属性" size="small" style="width: 150px">
                <el-option
                  v-for="item in stepAttributeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  size="mini"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工步号" prop="number" style="display: inline-block">
              <el-input-number v-model="form.number" :min="1" :step="1" style="width:150px;" size="small"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工步标记" prop="标记名称" style="display: inline-block">
              <el-select v-model="form.标记名称" placeholder="请选择工步标记" size="small" style="width: 120px" @change="getMarkingPic">
                <el-option
                  v-for="item in stepFlagList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  size="mini"/>
              </el-select>
              <el-image :src="markingPic" style="width: 20px;height: 20px" fit="contain">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"/>
                </div>
              </el-image>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="主要步骤" prop="text" style="display: inline-block">
          <el-input
            v-model="form.text"
            clearable
            size="small"
            style="width: 640px"
            placeholder="请输入主要步骤"/>
        </el-form-item>
        <el-form-item label="关键要素" prop="work" style="display: inline-block">
          <el-input
            v-model="form.work"
            clearable
            size="small"
            style="width: 640px"
            placeholder="请输入主要步骤"/>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="扭矩" prop="扭矩" style="display: inline-block">
              <el-input
                v-model="form.扭矩"
                clearable
                size="small"
                style="width: 250px"
                placeholder="请输入扭矩"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="等级" prop="等级" style="display: inline-block">
              <el-input
                v-model="form.等级"
                clearable
                size="small"
                style="width: 250px"
                placeholder="请输入等级"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="选装代码" prop="选装代码" style="display: inline-block">
              <el-input
                v-model="form.选装代码"
                clearable
                size="small"
                style="width: 250px"
                placeholder="请输入选装代码"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数量" prop="数量" style="display: inline-block">
              <el-input
                v-model="form.数量"
                clearable
                size="small"
                style="width: 250px"
                placeholder="请输入数量"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="辅料号" prop="辅料号" style="display: inline-block">
              <el-input
                v-model="form.辅料号"
                clearable
                size="small"
                style="width: 250px"
                placeholder="请输入辅料号"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="辅料名称" prop="辅料名称" style="display: inline-block">
              <el-input
                v-model="form.辅料名称"
                clearable
                size="small"
                style="width: 250px"
                placeholder="请输入辅料名称"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="工夹具名称" prop="工夹具名称" style="display: inline-block">
              <el-input
                v-model="form.工夹具名称"
                clearable
                size="small"
                style="width: 250px"
                placeholder="请输入工夹具名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工夹具型号" prop="工夹具型号_序列号" style="display: inline-block">
              <el-input
                v-model="form.工夹具型号_序列号"
                clearable
                size="small"
                style="width: 250px"
                placeholder="请输入工夹具型号/序列号"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="callOff('form')">取消</el-button>
        <el-button type="primary" size="small" @click="submitAdd('form')">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog v-el-drag-dialog :visible.sync="dialogFormVisible1" title="编辑工步指导内容" center style="min-height: 200px;" width="800px">
      <el-form ref="form1" :model="form1" :rules="rules1" label-position="right" label-width="90px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="工位号" prop="stationNumber" style="display: inline-block">
              <el-select v-model="form1.stationNumber" placeholder="请选择工位号" size="small" style="width: 240px">
                <el-option
                  v-for="item in stationNumber"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  size="mini"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品型号" prop="moduleDescription" style="display: inline-block">
              <el-select v-model="form1.moduleDescription" placeholder="请选择产品型号" size="small" style="width: 150px">
                <el-option
                  v-for="item in engineType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  size="mini"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="版本号" prop="version" style="display: inline-block">
              <el-select v-model="form1.version" placeholder="请选择版本" size="small" style="width: 150px">
                <el-option
                  v-for="item in versionList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  size="mini"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="工步属性" prop="stepAttribute" style="display: inline-block">
              <el-select v-model="form1.stepAttribute" placeholder="请选择工步属性" size="small" style="width: 150px">
                <el-option
                  v-for="item in stepAttributeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  size="mini"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工步号" prop="number" style="display: inline-block">
              <el-input-number v-model="form1.number" :min="1" :step="1" style="width:150px;" size="small"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工步标记" prop="标记名称" style="display: inline-block">
              <el-select v-model="form1.标记名称" placeholder="请选择工步标记" size="small" style="width: 120px" @change="getMarkingPic">
                <el-option
                  v-for="item in stepFlagList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  size="mini"/>
              </el-select>
              <el-image :src="markingPic" style="width: 20px;height: 20px" fit="contain">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"/>
                </div>
              </el-image>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="主要步骤" prop="text" style="display: inline-block">
          <el-input
            v-model="form1.text"
            clearable
            size="small"
            style="width: 640px"
            placeholder="请输入主要步骤"/>
        </el-form-item>
        <el-form-item label="关键要素" prop="work" style="display: inline-block">
          <el-input
            v-model="form1.work"
            clearable
            size="small"
            style="width: 640px"
            placeholder="请输入主要步骤"/>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="扭矩" prop="扭矩" style="display: inline-block">
              <el-input
                v-model="form1.扭矩"
                clearable
                size="small"
                style="width: 250px"
                placeholder="请输入扭矩"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="等级" prop="等级" style="display: inline-block">
              <el-input
                v-model="form1.等级"
                clearable
                size="small"
                style="width: 250px"
                placeholder="请输入等级"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="选装代码" prop="选装代码" style="display: inline-block">
              <el-input
                v-model="form1.选装代码"
                clearable
                size="small"
                style="width: 250px"
                placeholder="请输入选装代码"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数量" prop="数量" style="display: inline-block">
              <el-input
                v-model="form1.数量"
                clearable
                size="small"
                style="width: 250px"
                placeholder="请输入数量"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="辅料号" prop="辅料号" style="display: inline-block">
              <el-input
                v-model="form1.辅料号"
                clearable
                size="small"
                style="width: 250px"
                placeholder="请输入辅料号"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="辅料名称" prop="辅料名称" style="display: inline-block">
              <el-input
                v-model="form1.辅料名称"
                clearable
                size="small"
                style="width: 250px"
                placeholder="请输入辅料名称"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="工夹具名称" prop="工夹具名称" style="display: inline-block">
              <el-input
                v-model="form1.工夹具名称"
                clearable
                size="small"
                style="width: 250px"
                placeholder="请输入工夹具名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工夹具型号" prop="工夹具型号_序列号" style="display: inline-block">
              <el-input
                v-model="form1.工夹具型号_序列号"
                clearable
                size="small"
                style="width: 250px"
                placeholder="请输入工夹具型号/序列号"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="callOff1('form1')">取消</el-button>
        <el-button type="primary" size="small" @click="submitUpdate('form1')">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog v-el-drag-dialog :visible.sync="dialogFormVisible4" title="数据复制" center style="min-height: 200px" width="400px">
      <el-form ref="form4" :model="form4" :rules="rules4" label-position="right" label-width="110px">
        <el-form-item label="工位号" prop="engineTypeValue" style="display: inline-block">
          <el-select v-model="form4.stationNumberValue" placeholder="请选择工位号" size="small" style="width: 240px">
            <el-option
              v-for="item in stationNumber"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              size="mini"/>
          </el-select>
        </el-form-item>
        <el-form-item label="产品型号" prop="engineTypeValue" style="display: inline-block">
          <el-select v-model="form4.engineTypeValue" placeholder="请选择产品型号" size="small">
            <el-option
              v-for="item in engineType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              size="mini"/>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="callOff4()">取消</el-button>
        <el-button type="primary" size="small" @click="submitAdd4()">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog v-el-drag-dialog :visible.sync="dialogFormVisible5" title="工步绑定物料" center style="min-height: 200px;" width="400px">
      <el-form ref="form5" :model="form5" :rules="rules5" label-position="right" label-width="90px">
        <el-form-item label="工步" prop="stepContent" style="display: inline-block">
          <el-input
            v-model="form5.stepContent"
            size="small"
            readonly
            style="width: 250px"/>
        </el-form-item>
        <el-form-item label="物料编码" prop="materialCodeName" style="display: inline-block">
          <div @dblclick="searchMaterialList">
            <el-input
              v-model="form5.materialCodeName"
              size="small"
              type="textarea"
              autosize
              readonly
              style="width: 250px"
              placeholder="请双击选择绑定物料"/>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="callOffBindingStepMaterial('form5')">取消</el-button>
        <el-button type="danger" size="small" @click="clearStepMaterial('form5')">清除</el-button>
        <el-button type="primary" size="small" @click="bindingStepMaterial('form5')">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog v-el-drag-dialog :visible.sync="dialogFormVisible6" title="物料选择" center style="min-height: 200px;" width="600px">
      <el-table
        ref="tableDataMaterial"
        :data="tableDataMaterial"
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
        height="300px"
        class="main"
        tooltip-effect="dark"
        style="width: 100%"
        border
        size="mini"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55"/>
        <el-table-column align="center" label="版本号" width="100px">
          <template slot-scope="scope">
            {{ scope.row.版本号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="物料号" width="150px">
          <template slot-scope="scope">
            {{ scope.row.物料号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="零件名称" min-width="120px">
          <template slot-scope="scope">
            {{ scope.row.零件名称 }}
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible6 = false">取消</el-button>
        <el-button type="primary" size="small" @click="sureSelectMaterial()">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog v-el-drag-dialog :visible.sync="dialogFormVisible7" title="工步绑定指导图片" center style="min-height: 200px;" width="400px">
      <el-form ref="form6" :model="form6" :rules="rules6" label-position="right" label-width="90px">
        <el-form-item label="工步" prop="stepContent" style="display: inline-block">
          <el-input
            v-model="form6.stepContent"
            size="small"
            readonly
            style="width: 250px"/>
        </el-form-item>
        <el-form-item label="指导图片" prop="materialCodeName" style="display: inline-block">
          <el-upload
            id="invoiceScan"
            ref="upload"
            :on-remove="handelLimitStyle"
            :on-change="handelLimit"
            :multiple="true"
            :auto-upload="false"
            :on-success="uploadSuccess"
            :before-upload="beforeUpload"
            :on-exceed="warningExceed"
            :limit="limit"
            :data="Data"
            :action="upload"
            accept=".png,.jpg"
            style="margin-left: 0"
            list-type="picture-card">
            <i class="el-icon-plus"/>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="callOffBindingPicture('form6')">取消</el-button>
        <el-button type="primary" size="small" @click="submitPicture('form6')">确定</el-button>
      </div>
    </el-dialog>
    <el-image-viewer
      v-if="imgViewerVisible"
      :url-list="imgViewerList"
      :on-close="()=>{imgViewerVisible=false}"
      style="z-index: 98965"
    />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { url } from '@/utils/request'
import elImageViewer from 'element-ui/packages/image/src/image-viewer'
import { base64ImgtoFile } from '../../../utils/tool'
export default {
  components: {
    'el-image-viewer': elImageViewer
  },
  data() {
    return {
      imageType: ['bmp', 'jpg', 'png', 'gif'],
      imgViewerList: [],
      imgViewerVisible: false,
      tableData: [], // 总数据数组
      tableData1: [], // 总数据数组
      tableDataMaterial: [], // 总数据数组
      stationNumber: [],
      stationNumberValue: '',
      stationName: '',
      stepAttribute: '',
      stepAttributeList: [],
      stepFlag: '',
      stepFlagList: [],
      version: '',
      versionMaterial: '',
      versionList: [],
      moduleDescription: [],
      moduleDescriptionValue: '',
      engineTypeValue: '',
      engineTypeValue1: '',
      engineTypeName: '',
      engineType: [],
      labelText: '',
      labelNumber: '',
      loading1: false,
      exportLoading: false,
      dialogFormVisible: false,
      dialogFormVisible1: false,
      dialogFormVisible4: false,
      dialogFormVisible5: false,
      dialogFormVisible6: false,
      dialogFormVisible7: false,
      limit: 1,
      Data: {},
      upload: url,
      title: '',
      markingPic: '',
      form: {
        标记名称: '',
        扭矩: '',
        等级: '',
        选装代码: '',
        数量: '',
        辅料号: '',
        辅料名称: '',
        工夹具名称: '',
        工夹具型号_序列号: '',
        工时: '',
        stationNumber: '',
        moduleDescription: '',
        version: '',
        stepAttribute: '',
        number: '',
        materialCode: '',
        materialCodeSelect: '',
        materialName: '',
        text: '',
        work: '', // 作业
        fun: '', // 要领
        final: '' // 要领
      },
      rules: {
        标记名称: [{ required: true, message: '请选择工步标记', trigger: 'change' }],
        stationNumber: [{ required: true, message: '请选择工位号', trigger: 'change' }],
        moduleDescription: [{ required: true, message: '请选择产品型号', trigger: 'change' }],
        version: [{ required: true, message: '请选择版本', trigger: 'change' }],
        stepAttribute: [{ required: true, message: '请选择工步属性', trigger: 'change' }],
        number: [{ required: true, message: '请输入序号', trigger: 'blur' }],
        text: [{ required: true, message: '请输入主要步骤', trigger: 'blur' }],
        work: [{ required: true, message: '请输入关键要素', trigger: 'blur' }]
      },
      form1: {
        标记名称: '',
        扭矩: '',
        等级: '',
        选装代码: '',
        数量: '',
        辅料号: '',
        辅料名称: '',
        工夹具名称: '',
        工夹具型号_序列号: '',
        工时: '',
        ID: '',
        stationNumber: '',
        moduleDescription: '',
        version: '',
        stepAttribute: '',
        number: '',
        materialCode: '',
        materialCodeSelect: '',
        materialName: '',
        text: '',
        work: '', // 作业
        fun: '', // 要领
        final: '' // 要领
      },
      rules1: {
        stationNumber: [{ required: true, message: '请选择工位号', trigger: 'change' }],
        moduleDescription: [{ required: true, message: '请选择产品型号', trigger: 'change' }],
        version: [{ required: true, message: '请选择版本', trigger: 'change' }],
        stepAttribute: [{ required: true, message: '请选择工步属性', trigger: 'change' }],
        number: [{ required: true, message: '请输入序号', trigger: 'blur' }],
        text: [{ required: true, message: '请输入操作内容', trigger: 'blur' }]
      },
      form4: {
        engineTypeValue: '',
        stationNumberValue: ''
      },
      rules4: { // 订单下发验证
        engineTypeValue: [{ required: true, message: '请选择机型', trigger: 'blur' }],
        stationNumberValue: [{ required: true, message: '请选择工位号', trigger: 'blur' }]
      },
      form5: {
        ID: '',
        stepContent: '',
        materialCodeList: '',
        materialCodeName: ''
      },
      rules5: { // 订单下发验证
        materialCodeName: [{ required: true, message: '请选择需要绑定的物料', trigger: 'change' }]
      },
      form6: {
        ID: '',
        stepContent: ''
      },
      rules6: { // 订单下发验证
      },
      multipleSelection: []
    }
  },
  computed: {
    ...mapGetters([
      'id',
      'token',
      'departmentName'
    ])
  },
  watch: {
  },
  created() {
    this.getStationNumber()
    this.getEndStation()
    this.getMaterialVersion()
    this.getVersion()
    this.getStepAttribute()
    this.getStepFlag()
  },
  mounted() {
    setTimeout(() => {
      this.searchTable(false)
    }, 300)
  },
  methods: {
    getStationNumber() {
      this.stationNumber = []
      var param = []
      var Data = this.CreateData('11', 'MES_计划BOM_工位与名称_查询', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.stationNumber.push({
            label: `【${response.data[i].工位号}】${response.data[i].工位名称}`,
            value: response.data[i].工位号,
            labelName: response.data[i].工位名称
          })
        }
      })
    },
    // 初始化获取产品型号
    getEndStation() {
      this.engineType = []
      var param = []
      var Data = this.CreateData('11', 'MES_基本变量_机型代码_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) this.engineTypeValue = response.data[0].发动机机型标志
        for (let i = 0; i < response.data.length; i++) {
          this.engineType.push({
            label: response.data[i].发动机型号,
            value: response.data[i].发动机机型标志
          })
        }
      })
    },
    // 获取版本号
    getVersion() {
      this.versionList = []
      var param = []
      var Data = this.CreateData('11', '电子看板_工序内容_版本_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) this.version = response.data[0].版本号
        for (let i = 0; i < response.data.length; i++) {
          this.versionList.push({
            label: response.data[i].是否启用 === 1 ? `${response.data[i].版本号}【启用】` : response.data[i].版本号,
            value: response.data[i].版本号
          })
        }
      })
    },
    // 获取物料版本号
    getMaterialVersion() {
      var param = []
      var Data = this.CreateData('11', '电子看板_装配零件_版本_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) this.version = response.data[0].版本号
        for (let i = 0; i < response.data.length; i++) {
          if (response.data[i].是否启用 === 1) {
            this.versionMaterial = response.data[i].版本号
          }
        }
      })
    },
    // 获取工步属性
    getStepAttribute() {
      this.stepAttributeList = []
      var param = []
      var Data = this.CreateData('11', '电子看板_工序内容_工步属性_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) this.stepAttribute = response.data[0].工步属性
        for (let i = 0; i < response.data.length; i++) {
          this.stepAttributeList.push({
            label: response.data[i].工步属性名称,
            value: response.data[i].工步属性
          })
        }
      })
    },
    // 获取工步标记
    getStepFlag() {
      this.stepFlagList = []
      var param = []
      var Data = this.CreateData('11', '电子看板_工序内容_标记_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) this.stepFlag = response.data[0].标记名称
        for (let i = 0; i < response.data.length; i++) {
          const fileType = response.data[i]['图片类型']
          let fileContentImg = response.data[i]['产品图片']
          if (this.imageType.indexOf(fileType) !== -1) {
            fileContentImg = 'data:image/png;base64,' + fileContentImg
          }
          this.stepFlagList.push({
            fileContentImg: fileContentImg,
            label: response.data[i].标记名称,
            value: response.data[i].标记名称
          })
        }
      })
    },
    // 表格颜色变化
    tableRowClassName({ row, rowIndex }) {
      // console.log(row, rowIndex)
      if (rowIndex % 2 === 0) {
        return 'black'
      } else {
        return 'red'
      }
    },
    // 查询MES消息
    getQueryParam() {
      var param = []
      param[0] = ['产品型号代码', this.engineTypeValue]
      param[1] = ['工位号', this.stationNumberValue || null]
      param[2] = ['版本号', this.version]
      return param
    },
    validateSearch(showWarning = true) {
      if (!this.engineTypeValue) {
        if (showWarning) this.$message.warning('请选择产品型号')
        return false
      }
      return true
    },
    searchTable(showWarning = true) {
      if (!this.validateSearch(showWarning)) {
        return
      }
      this.tableData = []
      var param = this.getQueryParam()
      var Data = this.CreateData('11', '电子看板_工序内容_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length !== 0) {
          for (let i = 0; i < response.data.length; i++) {
            const fileType = response.data[i]['图片类型']
            let fileContentImg = response.data[i]['产品图片']
            if (this.imageType.indexOf(fileType) !== -1) {
              fileContentImg = 'data:image/png;base64,' + fileContentImg
            }
            response.data[i]['fileContentImg'] = fileContentImg
          }
          this.tableData = response.data
        }
      })
    },
    exportExcel() {
      if (!this.validateSearch()) {
        return
      }
      if (this.tableData.length === 0) {
        this.$message.warning('暂无数据')
        return
      }
      var exportData = JSON.parse(this.CreateData('2005', '电子看板_工序内容_查询', this.getQueryParam()))
      exportData.exportFileName = '工步内容维护'
      exportData.exportColumns = '工位号,版本号,标记名称=标记,工步号=序号,操作内容=主要步骤,技术要求=关键要素,工步属性名称=工步类型,关联物料,扭矩=扭矩(Nm),等级,选装代码,数量,辅料号,辅料名称,工夹具名称,工夹具型号_序列号=工夹具型号/序列号'
      var Data = JSON.stringify(exportData)
      this.runExcelExport(Data, 'exportLoading')
    },
    selectDate3() {
      this.tableData1 = []
      var param = []
      param[0] = ['站点编号', '']
      param[1] = ['物料号', '']
      param[2] = ['PageCurrent', 1]
      param[3] = ['PageSize', 1000]
      param[4] = ['PageCount', '1111', 'int', '1']
      param[5] = ['ItemCount', '1111', 'int', '1']
      var Data = this.CreateData('11', '电子看板_装配零件_物料拉动_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.result.length !== 0) {
          this.tableDataListOrigin = response.data.result
          this.tableData1 = response.data.result
        }
      })
    },
    filterTable() {
      if (this.form.materialCodeSelect === '') {
        this.tableData1 = this.tableDataListOrigin
      } else {
        this.tableData1 = this.tableDataListOrigin.filter(item => {
          if (item.物料号.includes(this.form.materialCodeSelect)) return true
          if (item.零件名称.includes(this.form.materialCodeSelect)) return true
          return false
        })
      }
    },
    selectMaterial(row) {
      this.form.materialCode = row.物料号
      this.form1.materialCode = row.物料号
    },
    copyOrder(formName) {
      if (this.tableData.length) {
        if (this.$refs[formName] !== undefined) {
          this.$refs[formName].resetFields()
        }
        this.dialogFormVisible4 = true
      } else {
        this.$message({
          message: '暂无可复制的数据！',
          type: 'error'
        })
      }
    },
    async submitAdd4() {
      let number, text
      for (let i = 0; i < this.tableData.length; i++) {
        number = this.tableData[i].工步号
        text = this.tableData[i].操作内容
        await this.submitAdd5(number, text)
      }
      this.$message({
        message: '增加成功',
        type: 'success'
      })
      this.dialogFormVisible4 = false
      this.engineTypeValue = this.form4.engineTypeValue
      this.stationNumberValue = this.form4.stationNumberValue
      this.searchTable()
    },
    async submitAdd5(number, text) {
      var param = []
      param[0] = ['工位号', this.form4.stationNumberValue]
      param[1] = ['产品型号代码', this.form4.engineTypeValue]
      param[2] = ['工步号', number]
      param[3] = ['操作内容', text]
      param[4] = ['发动机型号', this.form4.engineTypeValue]
      var Data = this.CreateData('12', '电子看板_工序内容_增加', param)
      return new Promise((resolve, reject) => {
        this.ExecDatabase(Data).then(response => {
          if (response.data[0].result === '1') {
            console.log('1')
            resolve(1)
          } else {
            console.log('0')
            reject(2)
          }
        })
      })
    },
    callOff4() {
      this.dialogFormVisible4 = false
    },
    addTo() {
      this.title = '添加'
      this.dialogFormVisible = true
    },
    submitAdd(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var param = []
          param[0] = ['工位号', this.form.stationNumber]
          param[1] = ['产品型号代码', this.form.moduleDescription]
          param[2] = ['工步号', this.form.number]
          param[3] = ['操作内容', this.form.text]
          param[4] = ['技术要求', this.form.work]
          param[5] = ['工步属性', this.form.stepAttribute]
          param[6] = ['工艺装备', this.form.fun]
          param[7] = ['辅助材料', this.form.final]
          param[8] = ['版本号', this.form.version]
          param[9] = ['扭矩', this.form.扭矩]
          param[10] = ['等级', this.form.等级]
          param[11] = ['选装代码', this.form.选装代码]
          param[12] = ['数量', this.form.数量]
          param[13] = ['辅料号', this.form.辅料号]
          param[14] = ['辅料名称', this.form.辅料名称]
          param[15] = ['工夹具名称', this.form.工夹具名称]
          param[16] = ['工夹具型号_序列号', this.form.工夹具型号_序列号]
          param[17] = ['工时', this.form.工时]
          param[18] = ['标记名称', this.form.标记名称]
          var Data = this.CreateData('12', '电子看板_工序内容_增加', param)
          this.ExecDatabase(Data).then(response => {
            if (response.data[0].result === '1') {
              this.$message({
                message: '增加成功',
                type: 'success'
              })
              this.searchTable()
              this.form.fun = ''
              this.form.final = ''
              this.form.text = ''
              this.form.work = ''
              this.form.扭矩 = ''
              this.form.等级 = ''
              this.form.选装代码 = ''
              this.form.数量 = ''
              this.form.辅料号 = ''
              this.form.辅料名称 = ''
              this.form.工夹具名称 = ''
              this.form.工夹具型号_序列号 = ''
              this.form.工时 = ''
              this.form.number++
            } else {
              this.$message.error('增加失败！')
            }
          })
        } else {
          return false
        }
      })
    },
    callOff() {
      this.$refs['form'].resetFields()
      this.dialogFormVisible = false
    },
    callOff1() {
      this.$refs['form1'].resetFields()
      this.dialogFormVisible1 = false
    },
    editInformation(row) {
      this.form1.ID = row.ID
      this.form1.stationNumber = row['工位号']
      this.form1.moduleDescription = row['产品型号代码']
      this.form1.version = row['版本号']
      this.form1.stepAttribute = row['工步属性']
      this.form1.number = row['工步号']
      this.form1.text = row['操作内容']
      this.form1.work = row['技术要求']
      this.form1.fun = row['工艺装备']
      this.form1.final = row['辅助材料']
      this.form1.标记名称 = row['标记名称']
      this.form1.扭矩 = row['扭矩']
      this.form1.等级 = row['等级']
      this.form1.选装代码 = row['选装代码']
      this.form1.数量 = row['数量']
      this.form1.辅料号 = row['辅料号']
      this.form1.辅料名称 = row['辅料名称']
      this.form1.工夹具名称 = row['工夹具名称']
      this.form1.工夹具型号_序列号 = row['工夹具型号_序列号']
      this.form1.工时 = row['工时']
      this.title = '编辑'
      this.dialogFormVisible1 = true
    },
    editInformation_material(row) {
      this.multipleSelection = []
      this.form5.ID = row.ID
      this.form5.stepContent = row['操作内容']
      this.form5.materialCodeList = ''
      this.form5.materialCodeName = ''
      this.dialogFormVisible5 = true
    },
    editInformation_pic(row) {
      this.form6.ID = row.ID
      this.form6.stepContent = row['操作内容']
      this.dialogFormVisible7 = true
      var obj = document.getElementsByClassName('el-upload--picture-card')
      if (obj[0].style.display === 'none') {
        for (var i = 0; i < obj.length; i++) {
          obj[i].style.display = 'block'
        }
      }
    },
    // 编辑消息
    submitUpdate(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var param = []
          param[0] = ['工步号', this.form1.number]
          param[1] = ['操作内容', this.form1.text]
          param[2] = ['ID', this.form1.ID]
          param[3] = ['技术要求', this.form1.work]
          param[4] = ['工步属性', this.form1.stepAttribute]
          param[5] = ['工艺装备', this.form1.fun]
          param[6] = ['辅助材料', this.form1.final]
          param[7] = ['版本号', this.form1.version]
          param[8] = ['扭矩', this.form1.扭矩]
          param[9] = ['等级', this.form1.等级]
          param[10] = ['选装代码', this.form1.选装代码]
          param[11] = ['数量', this.form1.数量]
          param[12] = ['辅料号', this.form1.辅料号]
          param[13] = ['辅料名称', this.form1.辅料名称]
          param[14] = ['工夹具名称', this.form1.工夹具名称]
          param[15] = ['工夹具型号_序列号', this.form1.工夹具型号_序列号]
          param[16] = ['工时', this.form1.工时]
          param[17] = ['标记名称', this.form1.标记名称]
          var Data = this.CreateData('12', '电子看板_工序内容_修改', param)
          this.ExecDatabase(Data).then(response => {
            if (response.data[0].result === '1') {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.dialogFormVisible1 = false
              this.searchTable()
            } else {
              this.$message.error('修改失败！')
            }
          })
        } else {
          return false
        }
      })
    },
    deleteInformation(row) {
      this.$confirm('此操作将永久删除该行, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var param = []
        param[0] = ['ID', row.ID]
        var Data = this.CreateData('12', '电子看板_工序内容_删除', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data[0].result === '1') {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.searchTable()
          } else {
            this.$message.error('删除失败！')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 处理图片字符串的方法
    parseImages(imageString) {
      if (!imageString) return []
      return imageString
        .split('^')
        .map(item => item.trim())
        .filter(item => item)
        .map(item => {
          const [id, name] = item.split('&')
          return {
            id: id.trim(),
            name: name.trim()
          }
        })
    },
    // 处理图片字符串的方法
    parseMaterialCode(materialString) {
      if (!materialString) return []
      return materialString
        .split('^')
        .map(item => item.trim())
        .filter(item => item)
        .map(item => {
          const [id, name] = item.split('&')
          return {
            id: id.trim(),
            name: name.trim()
          }
        })
    },
    // 查询物料清单
    searchMaterialList() {
      var param = []
      param[0] = ['工位号', this.stationNumberValue]
      param[1] = ['产品型号代码', this.engineTypeValue]
      param[2] = ['是否验证', 1]
      param[3] = ['物料号', '']
      param[4] = ['版本号', this.versionMaterial]
      var Data = this.CreateData('11', '电子看板_装配零件_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.tableDataMaterial = []
        if (response.data.length !== 0) {
          this.tableDataMaterial = response.data
        }
        this.dialogFormVisible6 = true
        this.multipleSelection = []
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    sureSelectMaterial() {
      this.form5.materialCodeList = this.multipleSelection.map(user => user.物料号).join(',')
      this.form5.materialCodeName = this.multipleSelection.map(user => `${user.物料号}(${user.零件名称})`).join('\n')
      this.dialogFormVisible6 = false
    },
    bindingStepMaterial(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var param = []
          param[0] = ['ID', this.form5.ID]
          param[1] = ['物料编号数组', this.form5.materialCodeList]
          var Data = this.CreateData('12', '电子看板_工序内容_增加_绑定物料_循环', param)
          this.ExecDatabase(Data).then(response => {
            if (response.data[0].result === '1') {
              this.$message({
                message: '增加成功',
                type: 'success'
              })
              this.searchTable()
              this.dialogFormVisible5 = false
            } else {
              this.$message.error('增加失败！')
            }
          })
        } else {
          return false
        }
      })
    },
    callOffBindingStepMaterial(formName) {
      this.dialogFormVisible5 = false
      this.$refs[formName].resetFields()
      this.form5.ID = ''
      this.form5.stepContent = ''
      this.form5.materialCodeList = ''
      this.form5.materialCodeName = ''
    },
    clearStepMaterial() {
      this.$confirm('此操作将永久清除物料绑定信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var param = []
        param[0] = ['ID', this.form5.ID]
        var Data = this.CreateData('12', '电子看板_工序内容_增加_绑定物料_清除', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data[0].result === '1') {
            this.$message({
              message: '清除成功',
              type: 'success'
            })
            this.searchTable()
            this.dialogFormVisible5 = false
          } else {
            this.$message.error('清除失败！')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    handelLimit() {
      var obj = document.getElementsByClassName('el-upload--picture-card')
      if (obj[0].style.display === 'block' || obj[0].style.display === '') {
        for (var i = 0; i < obj.length; i++) {
          obj[i].style.display = 'none'
        }
      }
    },
    handelLimitStyle() {
      var obj = document.getElementsByClassName('el-upload--picture-card')
      if (obj[0].style.display === 'none') {
        for (var i = 0; i < obj.length; i++) {
          obj[i].style.display = 'block'
        }
      }
    },
    warningExceed() {
      this.$message.error('仅可上传一张照片')
    },
    beforeUpload(file) { // 上传前检测
      const isJPG = /^image\/.*/.test(file.type)
      if (!isJPG) {
        this.$message.error('只能上传图片。。')
      }
      return isJPG
    },
    uploadSuccess(res) { // 上传成功回调
      this.dialogFormVisible7 = false
      this.$refs.upload.clearFiles()
      this.$message.success('上传成功！')
      this.searchTable()
      var obj = document.getElementsByClassName('el-upload--picture-card')
      if (obj[0].style.display === 'none') {
        for (var i = 0; i < obj.length; i++) {
          obj[i].style.display = 'block'
        }
      }
    },
    submitPicture() {
      var param = []
      param[0] = ['ID', this.form6.ID]
      param[1] = ['文件名称', '']
      param[2] = ['文件后缀', '']
      param[3] = ['文件内容', null]
      var Data1 = this.CreateData('15', '电子看板_工序内容_增加_绑定图片', param)
      this.Data.param = Data1
      this.$refs.upload.submit()
    },
    callOffBindingPicture(formName) {
      this.dialogFormVisible7 = false
      this.$refs[formName].resetFields()
      this.form6.ID = ''
      this.form6.stepContent = ''
    },
    // 删除指定图片
    deleteImg(item) {
      console.log(item)
      // 提示是否需要删除
      this.$confirm('此操作将永久删除该图片, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 删除图片
        var param = []
        param[0] = ['ID', item.id]
        var Data = this.CreateData('12', '电子看板_工序内容_增加_绑定图片_删除', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data[0].result === '1') {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.searchTable()
          } else {
            this.$message.error('删除失败！')
          }
        })
      })
    },
    getStepImg(item) {
      var param = []
      param[0] = ['ID', item.id]
      var Data = this.CreateData('11', '电子看板_工序内容_增加_绑定图片_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length !== 0) {
          const imgUrl = window.URL.createObjectURL(base64ImgtoFile(response.data[0]['产品图片'], response.data[0]['图片名称'], response.data[0]['图片类型']))
          this.imgViewerList = [imgUrl]
          this.imgViewerVisible = true
        }
      })
    },
    getMarkingPic(value) {
      for (let i = 0; i < this.stepFlagList.length; i++) {
        if (this.stepFlagList[i].value === value) {
          this.markingPic = this.stepFlagList[i].fileContentImg
          return
        }
      }
      this.markingPic = ''
    }
  }
}
</script>

<style scoped>
  .topCard{
    margin: 5px;
  }
  .topDiv{
    margin-bottom: 10px;
  }
  .el-select{
    width:200px
  }
  .el-input{
    width:200px
  }
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    position: absolute;
    right: 6px;
    top: 80px;
    width: 300px;
  }
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  ::v-deep.el-input.is-disabled .el-input__inner{
    color: #606266!important;
  }

  ::v-deep textarea{
    height: 100px;
  }
</style>
