@jeezhau/tasktpl v0.2.2

安装

npm install @jeezhau/tasktpl

配置

开启插件

import Vue from 'vue'
import store from './store'

import tasktpl from '@jeezhau/tasktpl'
import '@jeezhau/tasktpl/lib/tasktpl.css'

Vue.use(tasktpl, {
  baseUrl: process.env.VUE_APP_BASE_API + "/api/tasktpl",
  uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload",
  authToken: store.getters.token
})

模型管理页面路由

import { Layout } from 'xxxx' // 自定义布局

import { ModelClassHomeView, ModelDefinitionView, ObjectHomeView } from '@jeezhau/tasktpl'

const routes = [
  {
    path: '/tasktpl',
    component: Layout,
    meta: { title: '工作任务模板管理', icon: 'druid' },
    children: [
      {
        path: 'home',
        component: ModelClassHomeView,
        name: 'ModelClassHomeView',
        meta: { title: '工作任务模板列表', icon: 'list' }
      },
      {
        path: 'content',
        component: ModelDefinitionView,
        name: 'ModelClassDefineView',
        meta: { title: '工作任务模板定义', icon: 'code' }
      },
    ]
  },
  {
    path: '/objects',
    component: Layout,
    redirect: 'home',
    meta: { title: '工作任务实例管理', icon: 'druid' },
    children: [
      {
        path: 'home',
        component: ObjectHomeView,
        name: 'ObjectHomeView',
        meta: { title: '全部工作任务实例', icon: 'list' }
      },
    ]
  }
]

export default routes

模型选择

<template>
<CustomModelSelect v-model="name" 
    :disabled="disabled"
    @input="onChangeRes"/>
</template>
<script type="text/javascript">
export default {
  data() {
    return { 
      disabled: false,
      name: ''
    }
  }
}

</script>

对象实例

• CustomLayoutObjectForm object 中 resType 属性表示模版标识，调用内置接口获取表单模版定义；

<template>
  <el-row style="max-width:1000px">
    <CustomLayoutObjectForm v-if="object"
      :object="form" 
      :func-mode="funcMode"
      @submit="submitSave" 
      @close="onClose"/>
  </el-row>
</template>

<script>

import { getObjectById, createObject, updateObject } from '../../api/objects'  //自定存储接口

export default {
  props: {
    // 功能模式：create, update, view
    funcMode: {
      type: String,
      required: true,
      validator: function (value) {
        return ['create', 'update', 'view'].indexOf(value) !== -1
      }
    },
    // 操作的数据对象 {id, resType, additionalProperties}
    object: {
      type: Object, 
      required: true
    }
  },
  data() {
    return {
      form: {
        id: undefined,
        resType: undefined
      }
    }
  },
  watch: {
    object:{
      immediate: true,
      handler(value) {
        this.form = { resType: undefined, id: undefined}
        if(value.resType) {
          this.form.resType = value.resType
        }
        if(value.additionalProperties){
          this.form = Object.assign({}, {id: value.id, resType: value.resType}, JSON.parse(value.additionalProperties))
        } else if(value.id) {
          this.fetchObject(value.id)
        }
      },
      deep: true
    }
  },
  methods: {
    // 查询指定ID的对象实例
    fetchObject(id) {
      getObjectById(id).then(({data}) => {
        if(data) {
          this.form = Object.assign({}, {id: data.id, resType: data.resType}, JSON.parse(data.additionalProperties))
        }
      }).catch(err=>{
        this.$message({ showClose: true, message: err, type: "error" });
      })
    },
    /** 窗口关闭 */
    onClose() {
      this.$emit('close', true)
    },
    submitSave(data) {
      if(this.funcMode == 'create') {
        this.create(data)
      } else if(this.funcMode == 'update') {
        this.update(data)
      }
    },
    /** 创建 */
    create(newData) {
      let data = {
        resType: this.form.resType,
        additionalProperties: JSON.stringify(newData)
      }
      // 提交保存
      createObject(data)
    },
    /** 更新 */
    update(updateData) {
      let data = {
        id: this.object.id,
        additionalProperties: JSON.stringify(updateData)
      }
      // 提交保存
      updateObject(data)
    }
  }
}
</script>

• CustomObjectForm

<template>
  <CustomObjectForm v-if="formConf && object"
    :form-conf="formConf"
    :object="object" 
    :func-mode="funcMode"
    @submit="submitSave" 
    @close="onClose"/>
</template>

<script>

export default {
  props: {
    // 功能模式：create, update, view
    funcMode: {
      type: String,
      required: true,
      validator: function (value) {
        return ['create', 'update', 'view'].indexOf(value) !== -1
      }
    },
    // 操作的数据对象 {id, resType}
    object: {
      type: Object, 
      required: true
    },
    // 表单定义
    formConf: {
      type: Object,
      required: false
    }
  },
  data() {
    return {
      
    }
  },
  computed: {
    
  },
  methods: {
    /** 窗口关闭 */
    onClose() {
      this.$emit('close', true)
    },
    /** 提交 */
    submitSave(data) {
      if (this.funcMode == 'update') {
        // 提交创建
        
      } else if(this.funcMode == 'create'){
        // 提交更新

      }
    }
  }
}
</script>