青锋信息

青锋微信号：QF_qingfeng1024
青锋官网：http://www.qingfeng.plus/

组件使用

设计器新增组件

点击【自定义表单信息】-【新增/编辑】打开表单设计器，在青锋自定义表单下面新增了：当前用户/组织组件和选择用户/组织组件。
image.png

当前用户/组织组件

拖拽当前用户/组织组件，在右侧空间属性设置中，需要设置组件的内容设置：
1、当前用户：默认展示当前登录者的名称。
2、当前组织：默认展示当前登录者的组织名称。
image.png

选择用户/组织组件

拖拽选择用户/组织组件，在右侧空间属性设置中，需要设置组件的内容设置：
1、选择单用户：点击表单输入框，弹出单用户选择器，选择系统用户。
2、选择单组织：点击表单输入框，弹出单组织选择器，选择系统组织。
3、选择多用户：点击表单输入框，弹出多用户选择器，选择系统用户。
4、选择多组织：点击表单输入框，弹出多组织选择器，选择系统组织。
image.png

表单示例

image.png
image.png

vue端改造

mainjs中设置KFormDesign.setConfig

在main.js中新增组件内容
image.png
新增代码如下：

  1. // 引入自定义组件
  2. import currentUserOrganize from './components/k-form-design/customize/currentUserOrganize'
  3. import selectUserOrganize from './components/k-form-design/customize/selectUserOrganize'
  4. Vue.config.productionTip = false
  5. // 使用KFormDesign的setConfig函数添加自定义组件
  6. KFormDesign.setConfig({
  7.   title: '青锋定义字段',
  8.   list: [
  9.     {
  10.       type: 'loginUserOrganize', // 组件类型
  11.       label: '当前用户/组织', // 组件名称
  12.       // icon: 'icon-zidingyiyemian',
  13.       component: currentUserOrganize, // 组件
  14.       options: {
  15.         option_type:"",
  16.         defaultValue: "", // 默认值
  17.         multiple: false, // 多选
  18.         disabled: false, // 禁用
  19.         width: '100%', // 宽度
  20.         min: 0, // 最小值
  21.         max: 99, // 最大值
  22.         clearable: true, // 可清除
  23.         placeholder: '请选择', // 占位内容
  24.         showSearch: false // 可搜索
  25.       },
  26.       model: '', // 数据字段
  27.       key: '',
  28.       rules: [ // 校验规则
  29.         {
  30.           required: false,
  31.           message: '必填项'
  32.         }
  33.       ]
  34.     },
  35.     {
  36.       type: 'selectUserOrganize', // 组件类型
  37.       label: '选择用户/组织', // 组件名称
  38.       // icon: 'icon-zidingyiyemian',
  39.       component: selectUserOrganize, // 组件
  40.       options: {
  41.         option_type:"",
  42.         defaultValue: "", // 默认值
  43.         multiple: false, // 多选
  44.         disabled: false, // 禁用
  45.         width: '100%', // 宽度
  46.         min: 0, // 最小值
  47.         max: 99, // 最大值
  48.         clearable: true, // 可清除
  49.         placeholder: '请选择', // 占位内容
  50.         showSearch: false // 可搜索
  51.       },
  52.       model: '', // 数据字段
  53.       key: '',
  54.       rules: [ // 校验规则
  55.         {
  56.           required: false,
  57.           message: '必填项'
  58.         }
  59.       ]
  60.     }
  61.   ]
  62. })
  64. Vue.use(KFormDesign)

新增currentUserOrganize当前用户或组织组件

image.png

  1. <template>
  2.   <div>
  3.      <a-input
  4.       hidden
  5.       v-model="value"
  6.       @input="handleChange"
  7.     />
  8.       <a-input v-model="name"  v-if="disabled" disabled />
  9.       <a-input v-model="name"  v-if="!disabled" readOnly placeholder="请输入" @input="handleChange" />
  10.   </div>
  11. </template>
  12. <script>
  13. import { mapGetters } from 'vuex'
  14. export default {
  15.   name: 'cc',
  16.   props: ['record', 'value','disabled'],
  17.   // props: {
  18.   //   record: {
  19.   //     type: Object,
  20.   //     require: true
  21.   //   },
  22.   //   value: {
  23.   //     type: String,
  24.   //     default: ''
  25.   //   }
  26.   // },
  27.   data() {
  28.     return {
  29.       name:''
  30.     };
  31.   },
  32.   methods: {
  33.     handleChange (e) {
  34.       console.log(e.target.value)
  35.       // 使用 onChange 事件修改值
  36.       this.$emit('change', e.target.value)
  37.     }
  38.   },
  39.   computed: {
  40.     ...mapGetters(['currentUser'])
  41.   },
  42.   mounted () {
  43.     console.log("::::"+this.disabled)
  44.     // 打印接收的options
  45.     if(this.value==''){
  46.       if(this.record.options.option_type=='0'){
  47.         this.value=this.currentUser.id+":"+this.currentUser.name;
  48.         this.name = this.currentUser.name;
  49.         this.$emit('change', this.value)
  50.       }else if(this.record.options.option_type=='1'){
  51.         this.value=this.currentUser.orgPd.organize_id+":"+this.currentUser.orgPd.organize_name
  52.         this.name = this.currentUser.orgPd.organize_name;
  53.         this.$emit('change', this.value)
  54.       }
  55.     }else{
  56.         this.name = this.value.split(":")[1];
  57.         this.$emit('change', this.value)
  58.     }
  59.   }
  60. }
  61. </script>

新增selectUserOrganize选择用户及组织组件

  1. <template>
  2.   <div>
  3.     <a-input
  4.       hidden
  5.       v-model="value"
  6.       @input="handleChange"
  7.     />
  8.     <a-input
  9.       v-model="name"
  10.       placeholder="请输入"
  11.       v-if="disabled"
  12.       disabled
  13.     />
  14.     <a-input
  15.       v-model="name"
  16.       readOnly
  17.       placeholder="请输入"
  18.       v-if="!disabled"
  19.       @click="selectData"
  20.       @input="handleChange"
  21.     />
  22.   </div>
  23. </template>
  24. <script>
  25. import SelectOneUser from "@/views/system/User/SelectOneUser";
  26. import SelectMoreUser from "@/views/system/User/SelectMoreUser";
  27. import SelectOneOrganize from "@/views/system/Organize/SelectOneOrganize";
  28. import SelectMoreOrganize from "@/views/system/Organize/SelectMoreOrganize";
  29. export default {
  30.   name: "cc",
  31.   props: ["record", "value","disabled"],
  32.   // props: {
  33.   //   record: {
  34.   //     type: Object,
  35.   //     require: true
  36.   //   },
  37.   //   value: {
  38.   //     type: String,
  39.   //     default: ''
  40.   //   }
  41.   // },
  42.   data() {
  43.     return {
  44.       name:''
  45.     };
  46.   },
  47.   methods: {
  48.     handleChange(e) {
  49.       console.log(e.target.value);
  50.       // 使用 onChange 事件修改值
  51.       this.$emit("change", e.target.value);
  52.     },
  53.     selectData() {
  54.       if (this.record.options.option_type == "0") {
  55.         const user = {
  56.           user_id: this.value.split(":")[0],
  57.           user_name: this.value.split(":")[1]
  58.         };
  59.         this.dialog(SelectOneUser, user);
  60.       } else if (this.record.options.option_type == "1") {
  61.         const organize = {
  62.           organize_id: this.value.split(":")[0],
  63.           organize_name: this.value.split(":")[1]
  64.         };
  65.         this.dialog(SelectOneOrganize, organize);
  66.       } else if (this.record.options.option_type == "2") {
  67.         const users = {
  68.           user_ids: this.value.split(":")[0],
  69.           user_names: this.value.split(":")[1]
  70.         };
  71.         this.dialog(SelectMoreUser, users);
  72.       } else if (this.record.options.option_type == "3") {
  73.         const organizes = {
  74.           organize_ids: this.value.split(":")[0],
  75.           organize_names: this.value.split(":")[1]
  76.         };
  77.         console.log(organizes)
  78.         this.dialog(SelectMoreOrganize, organizes);
  79.       }
  80.     },
  81.     dialog(component, record) {
  82.       const that = this;
  83.       this.$dialog(
  84.         component,
  85.         // component props
  86.         {
  87.           record,
  88.           on: {
  89.             ok() {
  90.               console.log("ok 回调");
  91.             },
  92.             cancel() {
  93.               console.log("cancel 回调");
  94.             },
  95.             close() {
  96.               console.log("modal close 回调");
  97.             },
  98.             initValue(value, type) {
  99.               that.name=value.split(":")[1];
  100.               that.value=value;
  101.               that.$emit("change", value);
  102.             },
  103.           },
  104.         },
  105.         // modal props
  106.         {
  107.           title: "操作",
  108.           width: 800,
  109.           height: 500,
  110.           centered: true,
  111.           maskClosable: false,
  112.           okText: "确认",
  113.           cancelText: "取消",
  114.         }
  115.       );
  116.     },
  117.   },
  118.   mounted() {
  119.     // 打印接收的options
  120.     console.log(this.record);
  121.     // console.log(this.value)
  122.     this.name = this.value.split(":")[1];
  123.   },
  124.   updated(){
  125.      this.name = this.value.split(":")[1];
  126.   }
  127. };
  128. </script>

修改拓展设计器的属性

属性修改文件：formItemProperties
image.png
增加代码
说明：通过selectItem.type可以获取组件定义的类型，通过点击不同的类型，切换属性内容。
image.png

  1. <a-form-item
  2.           v-if="typeof options.option_type !== 'undefined' && selectItem.type === 'loginUserOrganize'"
  3.           label="选择-当前用户或组织"
  4.         >
  5.           <a-select default-value="0" v-model="options.option_type">
  6.             <a-select-option value="0">
  7.               当前用户
  8.             </a-select-option>
  9.             <a-select-option value="1">
  10.               当前组织
  11.             </a-select-option>
  12.           </a-select>
  13.         </a-form-item>
  15.         <a-form-item
  16.           v-if="typeof options.option_type !== 'undefined' && selectItem.type === 'selectUserOrganize'"
  17.           label="选择-当前用户或组织"
  18.         >
  19.           <a-select default-value="0" v-model="options.option_type">
  20.             <a-select-option value="0">
  21.               选择单用户
  22.             </a-select-option>
  23.             <a-select-option value="1">
  24.               选择单组织
  25.             </a-select-option>
  26.              <a-select-option value="2">
  27.               选择多用户
  28.             </a-select-option>
  29.             <a-select-option value="3">
  30.               选择多组织
  31.             </a-select-option>
  32.           </a-select>
  33.         </a-form-item>

java后端改造

修改VformServiceImpl

image.png
新增代码

  1. //自定义字段的拓展类型
  2. if(vfield.getField_type().equals("loginUserOrganize")||vfield.getField_type().equals("loginUserOrganize")){
  3.     String option_type = pp.get("option_type").toString();
  4.     vfield.setOption_type(option_type);
  5. }

新增字段：option_type

image.png

数据库增加字段：option_type

image.png