zkxt-web/src/views/activiti/module/header.vue

<template>
  <div>
    <el-input v-model="query.name" clearable size="small" placeholder="输入工作流名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
    <!-- <date-range-picker v-model="query.createDateStr" class="date-item" />
    <date-range-picker v-model="query.lastUpdateDateStr" class="date-item" /> -->
    <rrOperation />
    <el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus" @click="showForm">新增</el-button>
    <acticitiDialog :page-url.sync="activitiEditorUrl" :activiti-editor-visible.sync="activitiEditorVisible" />
    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :before-close="closeForm"
      :visible="formBoolean"
      :title="crud.status.title"
      width="500px"
    >
      <el-form label-width="80px" :rules="rules" :model="formLabelAlign">
        <el-form-item label="模型名称">
          <el-input v-model="formLabelAlign.name" />
        </el-form-item>
        <el-form-item label="模型key">
          <el-input v-model="formLabelAlign.key" />
        </el-form-item>
        <el-form-item label="模型描述">
          <el-input v-model="formLabelAlign.description" />
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="text"
          @click="closeForm"
        >
          取消
        </el-button>
        <el-button
          type="primary"
          @click="submitCU"
        >
          确认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { header, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
// import DateRangePicker from '@/components/DateRangePicker'
import { add } from '@/api/activiti/activiti'
import acticitiDialog from './activiti-dialog'
export default {
  components: { rrOperation, acticitiDialog/* , DateRangePicker */ },
  mixins: [header(), crud()],
  props: {
    permission: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      activitiEditorVisible: false,
      activitiEditorUrl: '',
      formLabelAlign: {
        name: '',
        key: '',
        description: ''
      },
      formBoolean: false,
      rules: {
        name: [
          { required: true, message: '请输入模型名称', trigger: 'blur' }
        ],
        key: [
          { required: true, message: '请输入模型key', trigger: 'blur' }
        ],
        description: [
          { required: false, message: '请输入模型描述', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    toEditPage() {
      add().then(modelId => {
        this.activitiEditorVisible = true
        this.activitiEditorUrl = process.env.VUE_APP_BASE_API + '/static/modeler.html?modelId=' + modelId
      })
    },
    showForm() {
      // this.crud.status.cu = 1
      // this.crud.status.add = 1
      this.formBoolean = true
    },
    closeForm() {
      this.formBoolean = false
    },
    submitCU() {
      if (this.formLabelAlign.name === '' || this.formLabelAlign.key === '') {
        this.$message.info('模型名称和key不能为空')
        return false
      }
      // eslint-disable-next-line no-unused-vars
      const map = {
        'name': this.formLabelAlign.name,
        'key': this.formLabelAlign.key,
        'description': this.formLabelAlign.description
      }
      add(map).then(res => {
        this.$message.info('添加成功')
        this.formBoolean = false
        this.activitiEditorVisible = true
        this.activitiEditorUrl = process.env.VUE_APP_BASE_API + '/static/modeler.html?modelId=' + res
        this.crud.refresh()
      })
    }
  }
}
</script>