client-base-v5/src/workflow/ApproveForm.vue

/** 审批表单 */
<template>
  <div>
    <div v-if="form != null && form.fields != null && form.fields.length > 0">
      <template v-for="field in form.fields">
        <div
          v-if="field.displayType == 'IntegerBoxEditor'"
          :key="field.fieldName"
          class="form-group"
          :for="field.fieldName"
        >
          <label>
            {{ field.displayName }}
            <span
              v-if="field.required == true"
              class="text-danger"
            >*</span>
          </label>
          <input
            :id="field.fieldName"
            v-model="field.fieldValue"
            autocomplete="off"
            type="number"
            class="form-control"
            :readonly="field.readonly"
            :disabled="field.readonly"
            :placeholder="field.placeholder"
          />
        </div>

        <div
          v-else-if="field.displayType == 'TextBoxEditor'"
          :key="field.fieldName"
          class="form-group"
          :for="field.fieldName"
        >
          <label>
            {{ field.displayName }}
            <span
              v-if="field.required == true"
              class="text-danger"
            >*</span>
          </label>
          <input
            :id="field.fieldName"
            v-model="field.fieldValue"
            autocomplete="off"
            type="text"
            class="form-control"
            :readonly="field.readonly"
            :disabled="field.readonly"
            :placeholder="field.placeholder"
          />
        </div>

        <div
          v-else-if="field.displayType == 'CheckBoxEditor'"
          :key="field.fieldName"
          class="form-group"
          :for="field.fieldName"
        >
          <label>
            {{ field.displayName }}
            <span
              v-if="field.required == true"
              class="text-danger"
            >*</span>
          </label>
          <div class="input-group">
            <Switches
              v-model="field.fieldValue"
              :selected="field.fieldValue"
              color="green"
              :readonly="field.readonly"
              :disabled="field.readonly"
              type-bold="true"
            />
          </div>
        </div>

        <div
          v-else
          :key="field.fieldName"
          class="form-group"
          :for="field.fieldName"
        >
          <label>
            {{ field.displayName }}
            <span
              v-if="field.required == true"
              class="text-danger"
            >*</span>
          </label>
          <input
            :id="field.fieldName"
            v-model="field.fieldValue"
            autocomplete="off"
            type="text"
            class="form-control"
            :readonly="field.readonly"
            :disabled="field.readonly"
            :placeholder="field.placeholder"
          />
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import Common from '../common/Common.js';
import WorkflowResource from '../api/workflow/WorkflowResource.js';
import { Notify, Uuid } from 'pc-component-v3';


export default {

  components: {
   
  },
  
  props: {
    processInstanceId: {
      type: String,
      default: null,
    },
    taskId: {
      type: String,
      default: null,
    },
    workflow: {
      type: Object,
      default : function(){
        return null;
      },
    },
  },
  emits: ['valueChanged'],

  data: function () {
    return {
      'form': null,
    };
  },

  watch: {
    workflow: function () {
      this.findForm();
    },

    taskId: function () {
      this.findForm();
    },
    form: {
      handler(newValue, oldValue) {
        var data = this.getData();
        this.$emit('valueChanged', data);
      },
      //				immediate: true,
      deep: true,
    },
  },

  mounted: function () {
    this.findForm();
  },

  methods: {
    /**
         * 查找任务的表单定义
         */
    findForm: function () {
      if (this.taskId == null || this.workflow == null || this.workflow.id == null) {
        return;
      }

      let formRequest = {
        'taskId': this.taskId,
        'workflowId': this.workflow.id,
        'processInstanceId': this.processInstanceId,
      };

      WorkflowResource.findForm(formRequest).then(successData => {
        if (successData != null && successData.fields != null && successData.fields.length > 0) {
          successData.fields.forEach(field => {
            field.fieldValue = null;
            if (field.displayType == 'CheckBoxEditor') {
              field.fieldValue = false;
            }
          });
        }
        this.form = successData;
      }, errorData => {
        Common.processException(errorData);
      });
    },

    /**
         * 获取界面的数据
         */
    getData: function () {
      if (this.form == null || this.form.fields == null || this.form.fields.length == 0) {
        return null;
      }

      // 强制字段检测
      let message = '';
      this.form.fields.forEach(field => {
        if (field.required == true && field.readonly === false && (field.fieldValue === null || field.fieldValue === '')) {
          message += ('字段：' + field.displayName + '是强制字段，请填写数据\r\n');
        }
      });

      if (message.length > 0) {
        Notify.error('数据校验异常', message, false);
        throw new Error('数据校验异常', message);
      }

      let results = [];
      this.form.fields.forEach(field => {
        if (field.readonly === false) {
          let result = {
            key: field.fieldName,
          };
          if (field.displayType == 'IntegerBoxEditor') {
            result.valueDouble = Number(field.fieldValue);
          } else if (field.displayType == 'CheckBoxEditor') {
            result.valueBoolean = field.fieldValue;
          } else if (field.displayType == 'TextBoxEditor') {
            result.valueString = field.fieldValue;
          }
          results.push(result);
        }
      });

      return results;
    },
  },
};
</script>


<style scoped>
</style>