@gonsin/gview 1.0.1-alpha.0

package/src/components/MyForm.vue

@@ -0,0 +1,324 @@
+<!--
+ * @Author: your name
+ * @Date: 2022-04-24 14:22:27
+ * @LastEditTime: 2022-11-22 16:36:34
+ * @LastEditors: lrm lrm@gonsin.cn
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: \client\src\components\MyForm.vue
+-->
+
+<template>
+    <div class="my_form">
+        <el-form ref="form" :model="form" label-width="140px">
+            <div
+                class="form_group"
+                v-for="(item, index) in formData"
+                :key="index"
+            > 
+                <div
+                    class="my_el_form_item"
+                    v-for="(items, indexss) in item.formItems"
+                    :key="indexss"
+                >   
+                    <myFormLine
+                        v-if="items.itemType == 'line' && isShowByFinishDom"
+                    ></myFormLine>
+                    <el-form-item
+                        :label="items.name"
+                        v-if="items.itemType != 'line' && isShowByFinishDom && handleShowIf(items.showIf)"
+                        :class="[
+                            items.itemType == 'hidden' ? 'display_none' : '',
+                        ]"
+                    >
+                        <myFormInput
+                            v-if="
+                                items.itemType == 'text_input' &&
+                                isShowByFinishDom
+                            "
+                            :placeholder="items.placeholder"
+                            :value.sync="form[items.keyName]"
+                            @update:value="handleAfterUpdateValue"
+                            :targetViewName="viewName"
+                        ></myFormInput>
+                        <myFormCheckBox
+                            v-if="
+                                items.itemType == 'check_box' &&
+                                isShowByFinishDom
+                            "
+                            :value.sync="form[items.keyName]"
+                            @update:value="handleAfterUpdateValue"
+                            :target="items"
+                            :targetViewName="viewName"
+                        ></myFormCheckBox>
+                        <myFormSelect
+                            v-if="
+                                items.itemType == 'selector' &&
+                                isShowByFinishDom
+                            "
+                            :value.sync="form[items.keyName]"
+                            @update:value="handleAfterUpdateValue"
+                            :target="items"
+                            :targetViewName="viewName"
+                        ></myFormSelect>
+                        <myFormTag
+                            v-if="items.itemType == 'label' && isShowByFinishDom"
+                            :target="items"
+                            :form="form"
+                        ></myFormTag>
+                        <myFormUploads
+                            v-if="items.itemType == 'file' && isShowByFinishDom"
+                            :value.sync="form[items.keyName]"
+                            :target="items"
+                            :targetViewName="viewName"
+                        ></myFormUploads>
+                        <myFormSelect
+                            v-if="items.itemType == 'multi_selector' && isShowByFinishDom"
+                            :value.sync="form[items.keyName]"
+                            @update:value="handleAfterUpdateValue"
+                            :target="items"
+                            :targetViewName="viewName"
+                            :multi="true"
+                        ></myFormSelect>
+                        <myFormSelectDateTime 
+                            v-if="items.itemType == 'date_time_selector' && isShowByFinishDom"
+                            :value.sync="form[items.keyName]"
+                            :targetViewName="viewName"
+                        ></myFormSelectDateTime>
+                        <myFormSelectDate 
+                            v-if="items.itemType == 'date_selector' && isShowByFinishDom"
+                            :value.sync="form[items.keyName]"
+                            @update:value="handleAfterUpdateValue"
+                            :targetViewName="viewName"
+                        ></myFormSelectDate>
+                        <myFormSelectTime 
+                            v-if="items.itemType == 'time_selector' && isShowByFinishDom"
+                            :value.sync="form[items.keyName]"
+                            :targetViewName="viewName"
+                        ></myFormSelectTime>
+                        <myFormCascader
+                            v-if="items.itemType == 'multi_tree_selector' && isShowByFinishDom"
+                            :value.sync="form[items.keyName]"
+                            @update:value="handleAfterUpdateValue"
+                            :target="items"
+                            :targetViewName="viewName"
+                        ></myFormCascader>
+                        <myFormCascader
+                            v-if="items.itemType == 'tree_selector' && isShowByFinishDom"
+                            :value.sync="form[items.keyName]"
+                            @update:value="handleAfterUpdateValue"
+                            :target="items"
+                            :targetViewName="viewName"
+                        ></myFormCascader>
+                        <!-- <myFormTree
+                            v-if="
+                                items.itemType == 'tree_selector' &&
+                                isShowByFinishDom
+                            "
+                            :value.sync="form[items.keyName]"
+                            :target="items"
+                            :targetViewName="viewName"
+                        ></myFormTree> -->
+                        <myFormRadio
+                            v-if="items.itemType == 'radio' && isShowByFinishDom"
+                            :value.sync="form[items.keyName]"
+                            @update:value="handleAfterUpdateValue"
+                            :target="items"
+                            :targetViewName="viewName"
+                        ></myFormRadio>
+                        <myFormSwitch
+                            v-if="items.itemType == 'switch' && isShowByFinishDom"
+                            :value.sync="form[items.keyName]"
+                            @update:value="handleAfterUpdateValue"
+                        ></myFormSwitch>
+                        <myFormTree
+                            v-if="items.itemType == 'tree_check_box' && isShowByFinishDom"
+                            :value.sync="form[items.keyName]"
+                            :target="items"
+                            :targetViewName="viewName"
+                            :isShowCheckBox="true"
+                            @resetData="treeCheckBoxReset"
+                        ></myFormTree>
+                        <myFormUeditor
+                            v-if="items.itemType == 'rich_text' && isShowByFinishDom"
+                            :value.sync="form[items.keyName]"
+                        ></myFormUeditor>
+                    </el-form-item>
+                </div>
+
+                <div class="form_btns">
+                    <el-button
+                        type="default"
+                        @click="clickDom(item.cancelButton)"
+                        >{{ item.cancelButton.name }}</el-button
+                    >
+                    <el-button
+                        type="primary"
+                        @click="clickDom(item.okButton)"
+                        >{{ item.okButton.name }}</el-button
+                    >
+                </div>
+            </div>
+        </el-form>
+    </div>
+</template>
+<script>
+import myFormInput from "./MyFormInput.vue";
+import myFormCheckBox from "./MyFormCheckBox.vue";
+import myFormSelect from "./MyFormSelect.vue";
+import myFormTag from "./MyFormTag.vue";
+import myFormUploads from "./MyFormUploads.vue";
+import myFormLine from "./MyFormLine.vue";
+import myFormCascader from "./MyFormCascader.vue";
+import myFormRadio from "./MyFormRadio.vue";
+import myFormSwitch from "./MyFormSwitch.vue";
+import myFormTree from "./MyFormTree.vue";
+import myFormUeditor from "./MyFormEditor.vue";
+import myFormSelectDate from "./MyFormSelectDate.vue";
+import myFormSelectDateTime from "./MyFormSelectDateTime.vue";
+import myFormSelectTime from "./MyFormSelectTime.vue";
+
+import * as api from '../api'
+import Mustache from 'mustache'
+import { vFun } from '../utils/common'
+export default {
+    props: {
+        queryProps:{
+            type: Array,
+            default:() => [],
+        },
+        formData: {
+            type: Array,
+            default:() => [],
+        },
+        selectData: {
+            type: Object,
+            default:null
+        },
+        viewName: {
+            type: String,
+            default:'',
+        },
+    },
+    components: {
+        myFormInput,
+        myFormCheckBox,
+        myFormSelect,
+        myFormTag,
+        myFormUploads,
+        myFormLine,
+        myFormCascader,
+        myFormTree,
+        myFormRadio,
+        myFormSwitch,
+        myFormUeditor,
+        myFormSelectDate,
+        myFormSelectDateTime,
+        myFormSelectTime
+    },
+    data() {
+        return {
+            isShowByFinishDom: false, //动态生成dom之后再显示
+            form: {},
+            formItemShowIf: {},
+            confirmPassWord: "",
+            selectList: [],
+        };
+    },
+    mounted() {
+        let timeout =  setTimeout(()=>{
+            let list = this.formData[0].formItems;
+            if (list.length != 0) {
+                // console.log(JSON.stringify(this.selectData) != null);
+                list.forEach((element) => {
+                    
+                    if (element.name == "确认密码") {
+                        return false;
+                    }
+
+                    //判断是否有数据传进来，即判断是否修改和添加
+                    if (this.selectData) {
+                        //修改
+                        if (
+                            typeof this.selectData[element.keyName] != "undefined"
+                        ) {
+                            this.form[element.keyName] =
+                                this.selectData[element.keyName];
+                        }
+                    } else {
+                        //添加
+                        this.form[element.keyName] = "";
+                    }
+                });
+                this.isShowByFinishDom = true;
+                clearTimeout(timeout);
+            }
+        },100)
+    },
+    methods: {
+        //重置treeCheckBox
+        treeCheckBoxReset(value, target) {
+            console.log(value);
+            console.log(target);
+            // return false;
+            console.log("是否为空" + this.form[target] == "");
+            if (this.form[target] != "") {
+                console.log("不空");
+                this.form[target] = this.form[target] + "," + value;
+                console.log(this.form[target]);
+            } else {
+                console.log("空");
+                this.form[target] = value;
+            }
+            // this.form[target] = value;
+        },
+        //点击事件
+        clickDom(dom) {
+            if (dom.action == "CONFIRM_AND_CLOSE") {
+                this.$emit("confirmForm", this.form, dom.buttonId)
+                // this.$emit("confirmDialog", this.form, dom.buttonId);
+            } else if (dom.action == "CLOSE_DIALOG") {
+                this.$emit("closeDialog");
+            } else if (dom.action == "CONFIRM") {
+                this.$emit("confirmForm", this.form, dom.buttonId)
+            }
+        },
+        // 根据表单的showIf字段隐藏或展示某些表单项目
+        handleShowIf (showIf) {
+            const v = vFun
+
+            if (typeof(showIf) != "undefined" && showIf != 1) {
+                let result, evalResult
+                try {
+                    result = Mustache.render(showIf, this)
+                    evalResult = eval(result)
+                    // console.log("showIf", showIf, "mustacheResult", result, "evalResult", evalResult);
+                    // console.log(evalResult);
+                } catch (e) {
+                    console.warn(e);
+                }
+                return eval(evalResult)
+            } else {
+                return showIf
+            }
+        },
+        // 解决父子组件双向绑定数据后视图更新问题
+        handleAfterUpdateValue(e) {
+            this.$forceUpdate()
+        }
+    },
+    watch: {
+        
+    }
+};
+</script>
+<style lang="scss" scoped>
+.form_group {
+    text-align: left;
+}
+.form_btns {
+    text-align: right;
+}
+.display_none {
+    display: none;
+}
+</style>

package/src/components/MyFormAutocomplete.vue

@@ -0,0 +1,135 @@
+<!--
+ * @Author: your name
+ * @Date: 2022-04-28 15:10:38
+ * @LastEditTime: 2022-11-07 16:46:15
+ * @LastEditors: lrm lrm@gonsin.cn
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: \client\src\components\MyFormAutocomplete.vue
+-->
+
+<template>
+    <div class="my_autocomplete">
+        <el-autocomplete
+            class="inline-input"
+            v-model="childData"
+            :fetch-suggestions="querySearch"
+            placeholder="请输入内容"
+            :trigger-on-focus="false"
+            @focus="returnList(target)"
+            @input="forceUpdate($event)"
+            @select="forceUpdate($event)"
+            :size="size"
+        ></el-autocomplete>
+    </div>
+</template>
+
+<script>
+import * as api from '../api'
+
+export default {
+    props: {
+        value:{
+           type:String
+        },
+        target:{
+            type:Object
+        },
+        targetViewName:{
+            type:String
+        },
+        size:{
+           type:String,
+           default:'medium',
+        },
+        isSpecial:{
+            type:Boolean,
+            default:false,
+        }
+    },
+    watch:{
+        value(){
+            this.childData = this.value
+        }
+    },
+    components: {
+    },
+    data() {
+        return {
+            childData:this.value,
+        };
+    },
+    mounted(){
+
+        
+    },
+    methods: {
+        forceUpdate(e) {
+            this.$emit('update:value',e) 
+        },
+         //返回处理的列表
+        returnList(item) {
+            console.log(item);
+            if(this.isSpecial){
+                this.getSelects(item,(list)=>{
+                    this.restaurants = list;
+                })
+            }
+        },
+         //特殊的数据
+        getSelects(item, callback) {
+            api
+                .getViewData({
+                    viewName: this.targetViewName,
+                    dataId: item.simpleListData.dataId,
+                })
+                .then((res) => {
+                    // console.log(res);
+                    if (res.data.state == 200) {
+                        if (res.data.data != null) {
+                            let list = res.data.data;
+                            if (list.length != 0) {
+                                let arr = [];
+                                list.forEach((item) => {
+                                    arr.push({
+                                        label: item,
+                                        value: item,
+                                    });
+                                });
+                                callback(arr);
+                            } else {
+                                callback([]);
+                            }
+                        } else {
+                            callback([]);
+                        }
+                    } else {
+                        callback([]);
+                    }
+                });
+        },
+        querySearch(queryString, cb) {
+            var restaurants = this.restaurants;
+            var results = queryString
+                ? restaurants.filter(this.createFilter(queryString))
+                : restaurants;
+            // 调用 callback 返回建议列表的数据
+            cb(results);
+        },
+        createFilter(queryString) {
+            return (restaurant) => {
+                console.log(restaurant.value);
+                return (
+                    restaurant.value
+                        .toLowerCase()
+                        .indexOf(queryString.toLowerCase()) === 0
+                );
+            };
+        },
+        handleSelect(e) {
+            console.log(e);
+        },
+    },
+};
+</script>
+<style lang="scss" scoped>
+</style>

package/src/components/MyFormCascader.vue

@@ -0,0 +1,107 @@
+<!--
+ * @Author: your name
+ * @Date: 2022-04-29 15:02:12
+ * @LastEditTime: 2022-11-19 16:35:53
+ * @LastEditors: lrm lrm@gonsin.cn
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: \client\src\components\MyFormCascader.vue
+-->
+<template>
+    <div class="my_cascader">
+        <el-cascader
+            :options="options"
+            :props="props"
+            @change="handleChange"
+            clearable
+        ></el-cascader>
+    </div>
+</template>
+
+<script>
+import * as api from '../api'
+import { initSelectorTreeData } from '../utils/common'
+
+export default {
+    props: {
+        value: {
+            type: Array | String,
+        },
+        target: {
+            type: Object,
+        },
+        targetViewName: {
+            type: String,
+        },
+        size: {
+            type: String,
+            default: "medium",
+        },
+    },
+    watch: {},
+    components: {},
+    data() {
+        return {
+            childData:this.value,
+            props: { multiple: true },
+            options: [
+
+            ],
+        };
+    },
+    mounted() {
+        this.getSelect(this.target);
+    },
+    methods: {
+        handleChange(e) {
+            if(this.target.itemType == 'tree_selector'){
+                //单选
+                // let arr = [];
+                // arr.push(e[e.length-1]);
+                this.$emit("update:value", e[e.length-1]);
+            } else {
+                this.$emit("update:value", e);
+            }
+        },
+        // forceUpdate(e) {
+        //     this.$emit("update:value", e);
+        // },
+        //根据请求的数据重新设置新的数据
+        setData(list, model) {
+            if(model.itemType == 'tree_selector'){
+                this.props.multiple = false;
+            }else{
+                this.props.multiple = true;
+            }
+            let arrModel = initSelectorTreeData({
+                list,
+                parentKey: null,
+                keyName: model.treeData.keyName,
+                titleName: model.treeData.titleName,
+                parentKeyName: model.treeData.parentKeyName
+            })
+            
+            this.options = arrModel;
+        },
+        //特殊的数据
+        getSelect(item) {
+            api
+                .getViewData({
+                    viewName: this.targetViewName,
+                    dataId: item.treeData.dataId,
+                })
+                .then((res) => {
+                    if (res.data.state == 200) {
+                        if (res.data.data != null) {
+                            let list = res.data.data;
+                            this.setData(list, item);
+                        } 
+                    } else {
+                        return false;
+                    }
+                });
+        },
+    },
+};
+</script>
+<style lang="scss" scoped>
+</style>

package/src/components/MyFormCheckBox.vue

@@ -0,0 +1,67 @@
+<!--
+ * @Author: your name
+ * @Date: 2022-04-28 09:30:27
+ * @LastEditTime: 2022-11-07 16:47:44
+ * @LastEditors: lrm lrm@gonsin.cn
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: \client\src\components\MyFormCheckBox.vue
+-->
+<!--
+ * @Author: your name
+ * @Date: 2022-04-22 15:51:20
+ * @LastEditTime: 2022-04-27 17:47:53
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: \gview\src\components\MyDialog.vue
+-->
+
+<template>
+    <div class="my_check_box">
+        <el-checkbox :size="size" v-model="childData" @change="forceUpdate">{{
+            target.name
+        }}</el-checkbox>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        value: {
+            type: Boolean,
+            default: false,
+        },
+        target: {
+            type: Object,
+        },
+        targetViewName: {
+            type: String,
+        },
+        size: {
+            type: String,
+            default: "medium",
+        },
+    },
+    watch: {
+        // value() {
+        //     this.childData = this.value ==""?false:this.value;
+        // },
+    },
+    components: {},
+    data() {
+        return {
+            childData: this.targetViewName.indexOf('Add') >-1?false:this.value,
+        };
+    },
+    mounted() {
+       
+    },
+    methods: {
+        forceUpdate(e) {
+            // this.$forceUpdate(); // @change="forceUpdate($event)"主要是解决clear图标响应问题
+            this.$emit('update:value',e)
+        },
+    },
+};
+</script>
+<style lang="scss" scoped>
+</style>