X-web/src/views/modules/worder/add-or-update-dialog.vue

<!-- 工单新增或编辑 -->
<template>
  <div>
    <el-dialog
      :title="!isModify ? '新增工单' : '修改工单'"
      width="70%"
      :close-on-click-modal="false"
      :visible.sync="visible"
    >
      <el-form
        :model="dataForm"
        :rules="dataRule"
        ref="dataForm"
        label-width="120px"
      >
        <el-row class="my-row">
          <el-col :span="8">
            <el-form-item label="工单类型" prop="taskType">
              <el-select
                v-model="dataForm.taskType"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in taskTypeOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工单级别" prop="ranks">
              <el-select
                v-model="dataForm.ranks"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in rankTypeOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="my-row">
          <el-col :span="8">
            <el-form-item label="工单名称" prop="taskName">
              <el-input
                v-model="dataForm.taskName"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工单内容" prop="content">
              <el-input
                v-model="dataForm.content"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="要求完成时间" prop="planCompletionTime">
              <el-date-picker
                v-model="dataForm.planCompletionTime"
                value-format="yyyy-MM-dd"
                type="date"
                style="width: 100%"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="my-row">
          <el-col :span="8">
            <el-form-item label="任务接收人" prop="receiver">
              <el-select
                v-model="dataForm.receiver"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in userList"
                  :key="item.userId"
                  :label="item.name"
                  :value="item.userId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="备注" prop="notes">
              <el-input
                type="textarea"
                v-model="dataForm.notes"
                placeholder="备注"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="my-row"> </el-row>
        <el-row class="my-row">
          <el-col :span="8">
            <el-form-item label="工单附件" prop="attachList">
              <upload-component
                :display="display"
                :displayStar="true"
                :title="'工单附件'"
                :accept="'*'"
                v-model="dataForm.attachList"
                @uploadSuccess="uploadSuccess"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer">
        <el-button @click="onChose">取消</el-button>
        <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import uploadComponent from '../common/upload-component-v2'
import { getUserList } from '@/api/user'
import { taskTypeOption, rankTypeOption } from '@/utils/enums'
export default {
  name: 'worder-add-or-update',
  components: { uploadComponent },
  data () {
    return {
      id: 0,
      type: '',
      visible: false,
      isModify: false,
      display: false,
      bizType: 1,
      dataForm: {},
      attachList: [],
      userList: [],
      taskTypeOption: taskTypeOption,
      rankTypeOption: rankTypeOption,
      dataRule: {
        taskCode: [
          { required: true, message: '请输入工单编码', trigger: 'blur' }
        ],
        taskType: [
          { required: true, message: '请选择工单类型', trigger: 'change' }
        ],
        ranks: [
          { required: true, message: '请选择工单级别', trigger: 'change' }
        ],
        taskName: [
          { required: true, message: '请输入工单名称', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入工单内容', trigger: 'blur' }
        ],
        planCompletionTime: [
          { required: true, message: '请选择要求完成时间', trigger: 'blur' }
        ],
        receiver: [
          { required: true, message: '请输入工单任务接收人', trigger: 'blur' }
        ],
        attachList: [
          { required: true, message: '请上传附件', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    onChose () {
      this.$emit('onChose')
      this.visible = false
    },
    // 初始化。type:{addItem:仅回调方法返回数据,update:调用接口更新}
    async init (id, item, type) {
      this.id = id || 0
      this.type = type
      if (item) {
        this.isModify = true
        if (item.attachList) {
          item.attachList.map(t => {
            if (t.fileName) { t.name = t.fileName }
          })
        }
        this.dataForm = item
      } else {
        this.isModify = false
        this.dataForm = {
          recordId: Math.round(Math.random() * 1000000)
        }
      }
      this.userList = []
      this.attachList = []
      this.visible = true
      await getUserList().then(({ data }) => {
        if (data && data.code === '200') {
          this.userList = data.data.records
        }
      })
    },
    // 表单提交
    dataFormSubmit () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.visible = false
          this.dataForm.receiverName = this.userList.find(
            (t) => t.userId === this.dataForm.receiver
          ).name
          if (this.type === 'addItem') {
            this.$emit('submit', this.dataForm)
          } else if (this.type === 'update') {

          }
        }
      })
    },
    prodSelected (item) {
      this.dataForm.productId = item.value
      this.dataForm.relatedProduct = item.label
    },
    uploadSuccess (fileList) {
      this.attachList = fileList
    }
  }
}
</script>

<style scoped></style>