X-web/src/views/modules/tech/ctafts-add-or-detail.vue

<template>
  <div>
    <el-dialog
      :title="display ? '工艺详情' : '新建工艺'"
      width="70%"
      :close-on-click-modal="false"
      :visible.sync="visible"
    >
      <el-form
        :model="dataForm"
        :rules="dataRule"
        ref="dataForm"
        label-width="auto"
      >
        <el-row class="my-row">
          <el-col :span="8">
            <el-form-item label="工艺名称" prop="techName">
              <el-input
                v-model="dataForm.techName"
                :disabled="display"
                placeholder="工艺名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工艺版本" prop="techVersion">
              <el-input
                v-model="dataForm.techVersion"
                :disabled="display"
                placeholder="工艺版本"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品" prop="productId">
              <el-select
                v-model="dataForm.productId"
                :disabled="display"
                remote
                placeholder="请选择"
              >
                <el-option
                  v-for="item in optionLevel"
                  :key="item.productId"
                  :label="item.productName"
                  :value="item.productId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注说明">
          <el-input
            v-model="dataForm.notes"
            :disabled="display"
            placeholder="备注说明"
          ></el-input>
        </el-form-item>
        <el-form-item label="" label-width="0px">
          <upload-component
            :display="display"
            :title="'附件'"
            :accept="'*'"
            :file-obj-list="fileList"
            @uploadSuccess="uploadSuccess"
          />
        </el-form-item>
        <el-form-item label="工艺步骤" prop="nodeList"> </el-form-item>
        <el-row
          class="my-row"
          style="height: 350px; background-color: #efefef;"
        >
          <work-flow
            ref="workFlow"
            :nodeData="workFlowData"
            @saveWorkFlow="saveWorkFlow"
          ></work-flow>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button v-if="!display" type="primary" @click="dataFormSubmit()"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getInfo, getProduct, getWorkType } from '@/api/crafts'
import UploadComponent from '../common/upload-component'
import WorkFlow from '@/components/work-flow/home'
// import data from "@/components/work-flow/config/data.json";
export default {
  name: 'add-or-update',
  components: { UploadComponent, WorkFlow },
  computed: {
    orgId: {
      get () {
        return this.$store.state.user.orgId
      }
    }
  },
  data () {
    return {
      workTypeOptions: [],
      datas: {},
      visible: false,
      display: false,
      fileList: [],
      dataList: [],
      id: 0,
      dataForm: {
        techName: '',
        techVersion: '',
        productId: '',
        notes: ''
      },
      previewPath: '',
      previewName: '',
      previewVisible: false,
      optionsProducts: [],
      optionLevel: [],
      workFlowData: {
        nodeList: [],
        lineList: []
      }, // 流程图数据
      dataRule: {
        techName: [
          { required: true, message: '工艺名称不能为空', trigger: 'blur' }
        ],
        techVersion: [
          { required: true, message: '工艺版本不能为空', trigger: 'blur' }
        ],
        productId: [
          { required: true, message: '产品不能为空', trigger: 'change' }
        ]
      },
      dataRule1: {
        name: [
          { required: true, message: '节点名称不能为空', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '节点类型不能为空', trigger: 'change' }
        ],
        workTypeId: [
          { required: true, message: '工种不能为空', trigger: 'change' }
        ]
      }
    }
  },
  created () {
    this.initNode()
  },
  mounted () {
    this.initNode()
  },
  methods: {
    initNode () {
      // this.workFlowData = data;
    },
    resetWorkFlow () {
      this.workFlowData = {
        nodeList: [],
        lineList: []
      }
    },
    async init (id, display) {
      this.dataForm = {
        techName: '',
        techVersion: '',
        productId: '',
        notes: ''
      }
      this.visible = true
      this.display = display
      await getProduct({ current: 1, size: 20000 }).then(({ data }) => {
        if (data && data.code === '200') {
          this.optionLevel = data.data.records
        }
      })
      if (!id) return
      await getInfo(id).then(async ({ data }) => {
        if (data && data.code === '200') {
          this.dataForm = data.data
        }
      })
    },
    getWorkType () {
      getWorkType().then(({ data }) => {
        if (data && data.code === '200') {
          this.workTypeOptions = data.data
        }
      })
    },
    handleRemove (file, fileList) {
      this.fileList = fileList
    },
    handleChange (file, fileList) {
      this.fileList = fileList
    },
    handleExceed (files, fileList) {
      this.$message.warning(
        `当前限制选择 5 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      )
    },
    validateField (type) {
      this.$refs.dataForm.validateField(type)
    },
    // 表单提交
    dataFormSubmit () {
      if (!this.workFlowData) {
        this.$message.error('请先完成流程图！')
        return
      }

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

          this.$http({
            url: this.$http.adornUrl(`/biz-service/technology/submit`),
            method: 'post',
            data: this.$http.adornData({
              ...this.dataForm,
              ...this.workFlowData
            })
          }).then(({ data }) => {
            if (data && data.code === '200') {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.resetWorkFlow()
                  this.$emit('refreshDataList')
                  this.visible = false
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    },
    uploadSuccess (fileList) {
      this.fileList = fileList
    },
    // 保存流程图
    saveWorkFlow (workFlowData) {
      this.workFlowData = workFlowData
    }
  }
}
</script>

<style lang="less" scoped>
.super-flow__node {
  .flow-node {
    > header {
      font-size: 14px;
      height: 32px;
      line-height: 32px;
      padding: 0 12px;
      color: #ffffff;
    }

    > section {
      text-align: center;
      line-height: 20px;
      overflow: hidden;
      padding: 6px 12px;
      word-break: break-all;
    }

    &.flow-node-start {
      > header {
        background-color: #55abfc;
      }
    }

    &.flow-node-condition {
      > header {
        background-color: #bc1d16;
      }
    }

    &.flow-node-approval {
      > header {
        background-color: rgba(188, 181, 58, 0.76);
      }
    }

    &.flow-node-cc {
      > header {
        background-color: #30b95c;
      }
    }

    &.flow-node-end {
      > header {
        height: 50px;
        line-height: 50px;
        background-color: rgb(0, 0, 0);
      }
    }
  }
}
</style>