CZC/operationSupport/src/views/flow/popups/AddOrEdit.vue

<!--
 * @Author: zwy
 * @Date: 2021-02-01 11:46:07
 * @LastEditors: zwy
 * @LastEditTime: 2021-03-11 11:16:24
 * @Descripttion: 工作流管理-编辑弹框
-->
<template>
  <div class="flowModal">
    <div
      class="tree-style"
      v-if="params.todo == 'add'"
    >
      <el-checkbox-group v-model="formData.companyIds">
        <el-checkbox
          v-for="item in organList"
          :label="item.id"
          :key="item.id"
        >{{ item.communityName }}</el-checkbox>
      </el-checkbox-group>
    </div>
    <zz-form
      class="form"
      :cols="formCols"
      :data="formData"
      :rules="formRules"
      labelWidth="100"
      ref="form"
    >
      <template slot="businessType">
        <el-select
          v-model="formData.businessType"
          placeholder="请选择业务类型"
          @change="changeBusinessType"
        >
          <el-option
            label="安保巡更"
            :value="1"
          ></el-option>
          <el-option
            label="设备巡检"
            :value="2"
          ></el-option>
          <el-option
            label="运维工单"
            :value="3"
          ></el-option>
          <el-option
            label="收费管理"
            :value="4"
          ></el-option>
        </el-select>
      </template>
      <template slot="taskType">
        <el-select
          v-model="formData.taskType"
          placeholder="请选择任务类型"
        >
          <el-option
            v-for="(item, index) in taskTypeList"
            :key="index"
            :value="+item.dictCode"
            :label="item.dictValue"
          ></el-option>
        </el-select>
      </template>
    </zz-form>
  </div>
</template>

<script>
export default {
  props: ['params'],
  data () {
    return {
      formType: [],
      organList: [],
      defaultProps: {
        children: 'orgs',
        label: 'communityName'
      },
      formData: {
        processName: '',
        businessType: '',
        taskType: '',
        companyIds: [],
        id: '',
        processDesc: '',
        companyOrgId: ''
      },
      taskTypeList: [],
      formCols: [
        [
          {
            label: '名称',
            prop: 'processName',
            input: true
          },
          {
            label: '业务类型',
            prop: 'businessType',
            slot: 'businessType'
          },
          {
            label: '任务类型',
            prop: 'taskType',
            slot: 'taskType'
          },
          {
            label: '描述',
            prop: 'processDesc',
            input: true
          }
        ]
      ],
      formRules: {
        processName: [this.$valid.inputRequired('名称')],
        businessType: [this.$valid.selectRequired('业务类型')],
        taskType: [this.$valid.selectRequired('业务类型')]
      }
    };
  },
  methods: {
    getOrgTreeList () {
      this.$http.get('/czc-community/assets/community/list').then(({ status, data, msg }) => {
        if (status === 0 && data) {
          this.organList = data;
          // this.$nextTick().then(() => {
          //     const firstNode = document.querySelector('.el-tree-node');
          //     firstNode.click();
          // });
        }
      });
    },
    getTaskType (typeKey) {
      this.$api.common.getDictionaryData(typeKey).then(({ msg, status, data }) => {
        if (status == 0) {
          this.taskTypeList = data;
        }
      });
    },
    submit () {
      new Promise((resolve) => {
        this.$refs.form.validate(resolve);
      }).then(() => {
        var posturl = '',
          method = 'post';
        if (this.params.todo === 'edit') {
          method = 'put';
          posturl = '/czc-community/workflow/process/edit';
          delete this.formData.companyIds;
        } else {
          posturl = '/czc-community/workflow/process/add';
          if (!this.formData.companyIds.length) {
            this.$message.error('请勾选所属社区');
            loading.close();
            return;
          }
        }
        var loading = this.$loading();
        this.$http[method](posturl, this.formData)
          .then(({ status, data, msg }) => {
            loading.close();
            if (0 == status) {
              this.$message.success(msg);
              this.params.callback && this.params.callback();
              this.$emit('close');
            } else {
              this.$message.error(msg);
            }
          })
          .catch((err) => {
            this.$message.error(err);
            loading.close();
          });
      });
    },
    changeBusinessType () {
      this.formData.taskType = '';
      switch (this.formData.businessType) {
        case 1:
          // this.getWorkList();
          this.getTaskType('SC_SECURITY_PATROL');
          break;
        case 2:
          // this.getTaskList();
          this.getTaskType('SC_EQUIPMENT_INSPECTION');
          break;
        case 3:
          this.getTaskType('SC_WORK_ORDER_TYPE');
          break;
        case 4:
          this.getTaskType('CZC_CHARGE_TYPE');
      }
    }
  },
  created () {
    this.getOrgTreeList();
    if (this.params.todo == 'edit') {
      this.__setValue('formData');
      this.formData.communityId = this.params.data.communityId;
      switch (this.formData.businessType) {
        case 1:
          // this.getWorkList();
          this.getTaskType('SC_SECURITY_PATROL');
          break;
        case 2:
          // this.getTaskList();
          this.getTaskType('SC_EQUIPMENT_INSPECTION');
          break;
        case 3:
          // this.getTaskType();
          this.getTaskType('SC_WORK_ORDER_TYPE');
          break;
        case 4:
          this.getTaskType('CZC_CHARGE_TYPE');
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.flowModal {
    display: flex;
    height: 100%;
    .tree-style {
        width: 340px;
        height: 100%;
        border: 1px solid #d8d8d8;
        border-radius: 4px;
        overflow: auto;
        padding: 20px;
        /deep/ .el-checkbox {
            line-height: 26px;
            display: block;
        }
    }
    .form {
        height: 100%;
        width: 100%;
        margin-left: 20px;
        border: 1px solid #d8d8d8;
        padding: 20px;
    }
}
</style>