factory_web/src/views/opm/oplcate_form.vue

<template>
  <el-drawer
    :title="titleMap[mode]"
    v-model="visible"
    :size="1000"
    destroy-on-close
    @closed="$emit('closed')"
  >
    <el-container v-loading="loading">
      <el-main style="padding: 0 20px 20px 20px">
        <el-form
          ref="dialogForm"
          :model="form"
          :rules="rules"
          :disabled="mode == 'show'"
          label-width="80px"
        >
          <el-row>
            <el-col :md="8" :sm="12" :xs="24">
              <el-form-item label="标识">
                <el-input v-model="form.code" type="text" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :md="8" :sm="12" :xs="24">
              <el-form-item label="名称">
                <el-input v-model="form.name" type="text" clearable></el-input>
              </el-form-item>
            </el-col>

            <el-col :md="8" :sm="12" :xs="24">
              <el-form-item label="工作流">
                <el-select v-model="form.workflow">
                  <el-option
                    v-for="item in workflowoptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :md="24" :sm="12" :xs="24">
              <el-form-item label="风险分析">
                <el-transfer
                width="500px"
                  v-model="form.risk_options"
                  :props="{
                    key: 'id',
                    label: 'name',
                  }"
                  :data="riskoptions"
                />
              </el-form-item>
            </el-col>
            <el-col :md="24" :sm="12" :xs="24">
              <el-form-item label="控制措施">
                <el-transfer
                  v-model="form.measure_options"
                  :props="{
                    key: 'id',
                    label: 'name',
                  }"
                  :data="measureoptions"
                />
              </el-form-item>
            </el-col>
            <el-col :md="24" :sm="24" :xs="24">
              <el-form-item label="关闭工作">
                  <el-transfer
                  v-model="form.close_options"
                  :props="{
                    key: 'id',
                    label: 'name',
                  }"
                  :data="closeoptions"
                />
               
              </el-form-item>
            </el-col>
            <el-col :md="24" :sm="12" :xs="24">
              <el-form-item label="描述">
                <el-input
                  v-model="form.description"
                  type="textarea"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-main>
      <el-footer>
        <el-button type="primary" :loading="isSaveing" @click="submit"
          >保存</el-button
        >
        <el-button @click="visible = false">取消</el-button>
      </el-footer>
    </el-container>
  </el-drawer>
</template>

<script>
export default {
  emits: ["success", "closed"],
  data() {
    return {
      loading: false,
      mode: "add",
      titleMap: {
        add: "新增",
        edit: "编辑",
        show: "查看",
      },
      form: {},
      rules: {},
      visible: false,
      isSaveing: false,
      selectionFilters: [],
      setFiltersVisible: false,
      workflowoptions: [],
      riskoptions: [],
      measureoptions:[],
      closeoptions:[],
    };
  },
  mounted() {
    this.getWorkflow();
    this.getRisk();
    this.getMeasure();
    this.getClose();
  },
  methods: {
    

    //工作流
    getWorkflow() {
      this.$API.wf.workflow.list.req({ page: 0 }).then((res) => {
        this.workflowoptions = res;
      });
    },
    //风险分析
    getRisk() {
      this.$API.system.dict.list
        .req({ page: 0, type__code: "risk_options" })
        .then((res) => {
          this.riskoptions = res;
        });
    },
 //管控措施
    getMeasure() {
      this.$API.system.dict.list
        .req({ page: 0, type__code: "measure_options" })
        .then((res) => {
          this.measureoptions = res;
        });
    },
    //关闭工作
    getClose() {
      this.$API.system.dict.list
        .req({ page: 0, type__code: "close_options" })
        .then((res) => {
          this.closeoptions = res;
        });
    },
    //显示
    open(mode = "add") {
      this.mode = mode;
      this.visible = true;
      return this;
    },
    //表单提交方法
    submit() {
      this.$refs.dialogForm.validate(async (valid) => {
        if (valid) {
          this.isSaveing = true;
          try {
            var res;
            if (this.mode == "add") {
            
              res = await this.$API.opm.oplcate.create.req(this.form);
            } else if (this.mode == "edit") {
              res = await this.$API.opm.oplcate.update.req(
                this.form.id,
                this.form
              );
            }
            this.isSaveing = false;
            this.$emit("success", this.form, this.mode);
            this.visible = false;
            this.$message.success("操作成功");
            return res;
          } catch (err) {
            //可以处理校验错误
            this.isSaveing = false;
            return err;
          }
        }
      });
    },
    //表单注入数据
    setData(data) {
      // this.loading = true
      // const params = {
      // 	id: data.id
      // }
      // setTimeout(async ()=>{
      // 	var res = await this.$API.system.table.info.get(params)
      // 	this.loading = false
      // 	this.form = res.data
      // },400)
      Object.assign(this.form, data);
    },
    //设置过滤项
    setFilters(filters) {
      this.selectionFilters = filters;
      this.setFiltersVisible = true;
    },
  },
};
</script>

<style scoped>
.el-transfer {
    
    --el-transfer-panel-width: 345px !important;
  
}
</style>