X-web/src/components/work-flow/node-edit.vue

<template>
  <div>
    <el-form
      :model="form"
      ref="form"
      :rules="rules"
      label-width="80px"
      v-if="node.type != 't-check'"
    >
      <el-form-item label="节点名称" prop="nodeName">
        <el-input
          v-model="form.nodeName"
          placeholder="请输入节点名称"
          :disabled="disabled || selectOperator"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="工种类型"
        prop="workTypeId"
        v-if="node.type !== 'end'"
      >
        <el-select
          v-model="form.workTypeId"
          placeholder="请选择"
          style="width: 100%"
          :disabled="disabled || selectOperator"
          @change="onChage"
        >
          <el-option
            v-for="item in workTypeOptions"
            :key="item.typeId"
            :label="item.name"
            :value="item.typeId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工时单价">
        <el-input
          v-model="form.quotedPrice"
          placeholder="工时单价"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="notes">
        <el-input
          v-model="form.notes"
          :disabled="disabled || selectOperator"
        ></el-input>
      </el-form-item>
      <el-form-item label="工序要求" prop="require" v-if="node.type !== 'end'">
        <el-input
          v-model="form.require"
          :disabled="disabled || selectOperator"
        ></el-input>
      </el-form-item>
      <el-form-item label="工序说明" prop="explain" v-if="node.type !== 'end'">
        <el-input
          v-model="form.explain"
          :disabled="disabled || selectOperator"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="所需工时"
        prop="preTaskTime"
        v-if="node.type !== 'end'"
      >
        <el-input
          v-model="form.preTaskTime"
          :disabled="disabled || selectOperator"
          oninput="value=value.replace(/[^0-9.]/g,'')"
        >
          <i slot="suffix" style="font-style: normal; margin-right: 10px">h</i>
        </el-input>
      </el-form-item>
      <el-form-item label="操作人" v-if="form.operatorName && !selectOperator">
        <el-input
          :disabled="disabled && selectOperator"
          v-model="form.operatorName"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="操作人"
        prop="operatorId"
        v-if="selectOperator && node.type !== 'end'"
      >
        <el-select
          v-model="form.operatorId"
          :disabled="disabled && selectOperator"
          multiple
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option
            v-for="item in operatorIdOptions"
            :key="item.userId"
            :label="item.name"
            :value="item.userId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="node.type !== 'end' && !disabled && !selectOperator">
        <upload-component
          :title="'附件'"
          :accept="'*'"
          :file-obj-list="fileList"
          @uploadSuccess="uploadSuccess"
        />
      </el-form-item>
      <el-form-item v-else>
        <upload-component
          :display="true"
          :title="'附件'"
          :accept="'*'"
          :file-obj-list="fileList"
          @uploadSuccess="uploadSuccess"
        />
      </el-form-item>
    </el-form>

    <!-- 节点是总检时显示下面内容 -->
    <el-form
      :model="form"
      ref="form"
      :rules="rules"
      label-width="80px"
      v-if="node.type == 't-check'"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="节点名称" prop="nodeName">
            <el-input
              v-model="form.nodeName"
              placeholder="请输入节点名称"
              :disabled="disabled || selectOperator"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="工种类型"
            prop="workTypeId"
            v-if="node.type !== 'end'"
          >
            <el-select
              v-model="form.workTypeId"
              placeholder="请选择"
              style="width: 100%"
              :disabled="disabled || selectOperator"
              @change="onChage"
            >
              <el-option
                v-for="item in workTypeOptions"
                :key="item.typeId"
                :label="item.name"
                :value="item.typeId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="工时单价">
            <el-input
              v-model="form.quotedPrice"
              placeholder="工时单价"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item
            label="工序要求"
            prop="require"
            v-if="node.type !== 'end'"
          >
            <el-input
              v-model="form.require"
              :disabled="disabled || selectOperator"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="工序说明"
            prop="explain"
            v-if="node.type !== 'end'"
          >
            <el-input
              v-model="form.explain"
              :disabled="disabled || selectOperator"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="所需工时"
            prop="preTaskTime"
            v-if="node.type !== 'end'"
          >
            <el-input
              v-model="form.preTaskTime"
              :disabled="disabled || selectOperator"
              oninput="value=value.replace(/[^0-9.]/g,'')"
            >
              <i slot="suffix" style="font-style: normal; margin-right: 10px"
                >h</i
              >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注" prop="notes">
            <el-input
              v-model="form.notes"
              :disabled="disabled || selectOperator"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div>检验项目</div>
        </el-col>
      </el-row>
      <!-- <el-row>
        <el-col :span="24">
          <el-form-item label="检验方法">
            <div>
              1.游标卡尺，2.千分尺，3.高度尺，4.百分表，5.R规，6.环规、塞规，7.游标角度尺，8.三坐标，9.模具，10.样板，11.夹具，12.目测，13.组合测量，14.精密测量，15.敲击，16.测厚仪，17.其他
            </div>
          </el-form-item>
        </el-col>
      </el-row> -->
      <el-row>
        <el-table :data="form.prodProductionRequireList" style="width: 100%">
          <el-table-column prop="pageNo" label="页次/图区">
            <template slot-scope="scope">
              <el-form-item
                :prop="'prodProductionRequireList.' + scope.$index + '.pageNo'"
                :rules="rules.pageNo"
                label-width="0px"
              >
                <el-input
                  v-model="scope.row.pageNo"
                  :disabled="disabled || selectOperator"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="inspectionParam" label="检查参数">
            <template slot-scope="scope">
              <el-form-item
                :prop="
                  'prodProductionRequireList.' +
                  scope.$index +
                  '.inspectionParam'
                "
                :rules="rules.inspectionParam"
                label-width="0px"
              >
                <el-input
                  v-model="scope.row.inspectionParam"
                  :disabled="disabled || selectOperator"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="inspectionMethod" label="检验方法">
            <template slot-scope="scope">
              <el-form-item
                :prop="
                  'prodProductionRequireList.' +
                  scope.$index +
                  '.inspectionMethod'
                "
                :rules="rules.inspectionMethod"
                label-width="0px"
              >
                <el-select
                  v-model="scope.row.inspectionMethod"
                  placeholder="请选择"
                  style="width: 100%"
                  :disabled="disabled || selectOperator"
                >
                  <el-option
                    v-for="item in inspectionMethodOptions"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="allowValues" label="允许值">
            <template slot-scope="scope">
              <el-form-item
                :prop="
                  'prodProductionRequireList.' + scope.$index + '.allowValues'
                "
                :rules="rules.allowValues"
                label-width="0px"
              >
                <el-input
                  v-model="scope.row.allowValues"
                  :disabled="disabled || selectOperator"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="address" label="实测记录1"></el-table-column>
          <el-table-column prop="address" label="实测纪录2"></el-table-column> -->
          <el-table-column prop="address" label="备注">
            <template slot-scope="scope">
              <el-form-item
                :prop="'prodProductionRequireList.' + scope.$index + '.name'"
                :rules="rules.name"
                label-width="0px"
              >
                <el-input
                  v-model="scope.row.name"
                  :disabled="disabled || selectOperator"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-circle-plus"
                circle
                @click="addRow"
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="removeRow(scope.$index)"
                v-if="scope.$index > 0"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { getWorkType } from "@/api/crafts";
import { workTypeMasterList } from "@/api/worktype";
import UploadComponent from "@/views/modules/common/upload-component";
export default {
  name: "nodeEdit",
  components: { UploadComponent },
  props: {
    data: {
      type: Object,
      default: () => {},
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    // 是否选择操作人，当选择操作人时，其他字段不可编辑
    selectOperator: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // 工种列表
      workTypeOptions: [],
      // 操作人列表
      operatorIdOptions: [],
      node: {},
      form: {
        nodeName: "",
        workTypeId: "",
        operatorId: [],
        prodProductionRequireList: [{}],
      },
      fileList: [],
      inspectionMethodOptions: [
        { value: "1", name: "游标卡尺" },
        { value: "2", name: "千分尺" },
        { value: "3", name: "高度尺" },
        { value: "4", name: "百分表" },
        { value: "5", name: "R规" },
        { value: "6", name: "环规、塞规" },
        { value: "7", name: "游标角度尺" },
        { value: "8", name: "三坐标" },
        { value: "9", name: "模具" },
        { value: "10", name: "样板" },
        { value: "11", name: "夹具" },
        { value: "12", name: "目测" },
        { value: "13", name: "组合测量" },
        { value: "14", name: "精密测量" },
        { value: "15", name: "敲击" },
        { value: "16", name: "测厚仪" },
        { value: "17", name: "其他" },
      ],
      rules: {
        nodeName: [
          { required: true, message: "请输入节点名称", trigger: "blur" },
        ],
        workTypeId: [
          { required: true, message: "请选择工种", trigger: "blur" },
        ],
        operatorId: [
          { required: true, message: "请选择操作人", trigger: "blur" },
        ],
        preTaskTime: [
          { required: true, message: "请输入所需工时", trigger: "blur" },
        ],
        pageNo: [{ required: true, message: "请输入", trigger: "blur" }],
        inspectionParam: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        inspectionMethod: [
          { required: true, message: "请选择", trigger: "blur" },
        ],
        allowValues: [{ required: true, message: "请输入", trigger: "blur" }],
      },
    };
  },
  watch: {
    data(val) {
      this.node = val;
      this.form = {
        ...this.form,
        ...this.node,
      };
      if (this.node.operatorId) {
        this.form.operatorId = this.node.operatorId.split(",");
      }

      // 附件
      if (this.node.attachList) {
        this.$nextTick(() => {
          this.fileList = [];
          this.node.attachList.forEach((item) => {
            this.fileList.push({
              name: item.fileName,
              url: item.url,
              id: item.url,
            });
          });
        });
      }
    },
    disabled(val) {
      this.disabled = val;
    },
  },
  activated() {},
  created() {
    this.getWorkTypeOptions();
  },
  computed: {},
  mounted() {
    this.node = this.data;
    this.form = {
      ...this.form,
      ...this.node,
    };
    if (this.node.operatorId) {
      this.form.operatorId = this.node.operatorId.split(",");
    }

    // 附件
    if (this.node.attachList) {
      this.fileList = [];
      this.node.attachList.forEach((item) => {
        this.fileList.push({
          name: item.fileName,
          url: item.url,
          id: item.url,
        });
      });
    }
    this.getOperatorList();
  },
  methods: {
    getWorkTypeOptions() {
      this.workTypeOptions = [];
      getWorkType().then(({ data }) => {
        if (data && data.code === "200") {
          this.workTypeOptions = data.data;
        }
      });
    },
    onChage(val) {
      this.workTypeOptions.forEach((v) => {
        if (v.typeId === val) {
          this.form.quotedPrice = Number(v.quotedPrice || 0).toFixed(2);
        }
      });
    },
    // 按工种ID查询操作人列表
    getOperatorList() {
      if (this.node.workTypeId) {
        workTypeMasterList(this.node.workTypeId).then(({ data }) => {
          if (data && data.code === "200") {
            this.operatorIdOptions = [];
            data.data.forEach((item) => {
              this.operatorIdOptions.push(item);
            });
          }
        });
      }
    },
    uploadSuccess(fileList) {
      this.fileList = fileList;
    },
    // 校验表单
    validateFormData() {
      return new Promise((resolve, reject) => {
        this.$refs["form"].validate((valid) => {
          if (!valid) {
            // eslint-disable-next-line prefer-promise-reject-errors
            reject();
            return;
          }
          resolve();
        });
      });
    },
    // 获取表单数据
    formData() {
      const form = { ...this.form, operatorName: "" };
      if (this.form.operatorId != null) {
        form.operatorId = this.form.operatorId.toString();
        this.form.operatorId.forEach((id) => {
          let op = this.operatorIdOptions.find((t) => t.userId === id);
          if (op.name != null) {
            form.operatorName += op.name + " ";
          }
        });
      }

      // 填充附件
      let fList = this.fileList;
      if (fList.length > 0) {
        form.attachList = [];
        for (let i = 0; i < fList.length; i++) {
          form.attachList.push({
            fileName: fList[i].name,
            url: fList[i].url,
          });
        }
      }
      return form;
    },

    addRow() {
      this.form.prodProductionRequireList.push({});
    },
    removeRow(index) {
      this.form.prodProductionRequireList.splice(index, 1);
    },
  },
};
</script>
<style scoped></style>