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

<template>
  <div>
    <el-form :model="form" ref="form" :rules="rules" label-width="80px">
      <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>
  </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: []
      },
      fileList: [],
      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' }
        ]
      }
    }
  },
  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
    }
  }
}
</script>
<style scoped></style>