@gonsin/gview 1.0.1-alpha.1 → 1.0.2-alpha.0

package/src/components/MyForm.vue

@@ -1,324 +0,0 @@
-<!--
- * @Author: your name
- * @Date: 2022-04-24 14:22:27
- * @LastEditTime: 2022-12-01 11:26:20
- * @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

@@ -1,135 +0,0 @@
-<!--
- * @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

@@ -1,107 +0,0 @@
-<!--
- * @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

@@ -1,67 +0,0 @@
-<!--
- * @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>