Source/UBCS-WEB/src/components/code-dialog-page/referConfigDialog.vue

@@ -1,618 +1,97 @@
<template>
    <!-- 第二层对话框,属性码段，公式编辑框弹窗 -->
    <el-dialog
      title="参照配置"
      append-to-body
      :visible.sync="isShowReferConfig"
      width="90%"
      @close="recoveryDataAndForm('initData')"
      style="height: 110vh; margin-top: -13vh; overflow-y: hidden">
        <div style="width: 100%; overflow-y: auto; height: 70vh">
            <el-row>
                <avue-form :option="formOption" v-model="form"></avue-form>
            </el-row>
            <el-row v-show="form.referWindowType==0 || form.referWindowType==3">
                <avue-crud
                    ref="crudAttr"
                    :option="attrOption" 
                    :data="attrData">
                    <!-- 表格内操作按钮 -->
                    <template slot="menu" slot-scope="scope">
                        <el-button type="text"
                            size="small"
                            icon="el-icon-search"
                            plain
                            @click="scope.row.isquery=!scope.row.isquery">
                            {{scope.row.isquery ? "快速查询":"取消快速查询"}}
                        </el-button>
                        <el-button type="text"
                            size="small"
                            icon="el-icon-minus"
                            plain
                            @click="removeCurrentRow(scope.row,'removeAttr')">移除
                        </el-button>
                    </template>
                    <!-- 表格左上方按钮区域 -->
                    <template slot="menuLeft" slot-scope="scope">
                        <el-button type="primary"
                            size="small"
                            icon="el-icon-plus"
                            @click="openAddSearchOrAttrDialog('selectAttr')">选择属性
                        </el-button>
                    </template>
                </avue-crud>
            </el-row>
            <el-row>
                <avue-crud
                    ref="crudAddCondition"
                    :option="addSearchCondtionOption" 
                    :data="addSearchCondtionData">
                    <!-- 表格内操作按钮 -->
                    <template slot="menu" slot-scope="scope">
                        <el-button type="text"
                            size="small"
                            icon="el-icon-minus"
                            plain
                            @click="removeCurrentRow(scope.row,'removeaddSearchCondtion')">移除
                        </el-button>
                    </template>
                    <!-- 表格左上方按钮区域 -->
                    <template slot="menuLeft" slot-scope="scope">
                        <el-button type="primary"
                            size="small"
                            icon="el-icon-plus"
                            @click="openAddSearchOrAttrDialog('addSearchCondition')">
                            添加查询条件
                        </el-button>
                    </template>
                </avue-crud>
            </el-row>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="selectedListReferConfig">确 定</el-button>
            <el-button @click="recoveryDataAndForm('initForm')">清空内容</el-button>
            <el-button @click="isShowReferConfig = false">取 消</el-button>
        </div>
    </el-dialog>

    <div v-if="display">
        <!-- 第二层对话框,自定义参照配置Form组件 -->
        <refer-config-form-dialog
            ref="referConfigFormDialog"
            @echoReferConfig="echoReferConfig">
        </refer-config-form-dialog>
        <!-- 第二层对话框,直接选择参照配置crud组件 -->
        <refer-config-crud-dialog
            ref="referConfigCrudDialog"
            @openReconfigInterFace="openReconfigInterFace"
            @echoReferConfig="echoReferConfig">
        </refer-config-crud-dialog>
    </div>
</template>
    

<script>
    export default {
        name: "referConfigDialog",
        props: {
            //本场景变量
            thisSceneTableData: {
            type: Array,
            },
        },
        data() {
            return {
                labelWidth: '150',   // 标题宽度
                isShowReferConfig: false,  // 对话框显示隐藏控制
                // 表单对象
                form: {
                    text: '',
                    text1: '',
                    text2: '',
                    referWindowType: 0, //参照窗口类型
                },
                attrData: [
                    {
                        field: 'id',
                        title: '编号',
                        fieldType: 'text',
                        fieldTypeText: '文本框',
                        sort: "true",
                        sortField: 'id',
                        width: '150',
                        isquery: true,
                    },{
                        field: 'name',
                        title: '名称',
                        fieldType: 'text',
                        fieldTypeText: '文本框',
                        sort: "true",
                        sortField: 'name',
                        width: '180',
                        isquery: true,
                    }
                ],
                attrOption: {
                    height:'150',
                    tip: false,
                    addBtn: false,
                    editBtn: false,
                    searchShow: false,
                    searchMenuSpan: 6,
                    border: false,
                    index: true,
                    viewBtn: false,
                    delBtn: false,
                    selection: false,
                    disablePage: false,
                    refreshBtn: false,
                    columnBtn: false,
                    dialogClickModal: false,
                    highlightCurrentRow: true,
                    column: [
                        {
                            label: "列字段(*)",
                            prop: "field",
                        },{
                            label: "列名(*)",
                            prop: "title",
                        },{
                            label: "字段类型(*)",
                            prop: "fieldTypeText",
                        },{
                            label: "列表可排序",
                            prop: "sort",
                        },{
                            label: "排序字段",
                            prop: "sortField",
                        },{
                            label: "字段宽度",
                            prop: "width",
                        },{
                            label: "列固定位置",
                            prop: "fixedText",
                        },{
                            label: "js显示代码",
                            prop: "templet",
                        },
                    ]
                },
                addSearchCondtionData: [
                        {
                            id: 'test',
                            cate: 'test',
                            value: 1
                        },{
                            id: 'test1',
                            cate: 'test1',
                            value: 2
                        },{
                            id: 'test2',
                            cate: 'test2',
                            value: 3
                        },{
                            id: 'test4',
                            cate: 'test4',
                            value: 4
                        }
                ],
                addSearchCondtionOption: {
                    height:'150',
                    tip: false,
                    addBtn: false,
                    editBtn: false,
                    searchShow: false,
                    searchMenuSpan: 6,
                    border: false,
                    index: true,
                    viewBtn: false,
                    delBtn: false,
                    selection: false,
                    disablePage: false,
                    refreshBtn: false,
                    columnBtn: false,
                    dialogClickModal: false,
                    highlightCurrentRow: true,
                    column: [
                        {
                            label: "筛选字段",
                            prop: "id",
                        },{
                            label: "筛选类型",
                            prop: "cate",
                        },{
                            label: "筛选值",
                            prop: "value",
                        }
                    ]
                }
            };
        },
        // 表单界面显示内容配置
        computed: {
            formOption() {
                return {
                    submitBtn: false,
                    emptyBtn: false,
                    labelWidth: '145', //默认标签宽度
                    // 基础表单信息展示区域
                    column: [
                        {
                            label: '参照的业务类型',
                            prop: 'text1',
                            span: 7,
                            type: 'table',
                            children: {
                                border: true,
                                column: [{
                                    label: '业务类型编号',
                                    width: 120,
                                    search: true,
                                    searchSpan: 8,
                                    searchLabelWidth: 100,
                                    prop: 'id'
                                },{
                                    label: '业务类型名称',
                                    search: true,
                                    searchSpan: 8,
                                    searchLabelWidth: 100,
                                    prop: 'name'
                                },{
                                    label: '描述',
                                    search: false,
                                    prop: 'description'
                                }],
                            },
                            rules: [{
                                required: true,
                                message: "(参照的业务类型)必填项不能为空",
                                trigger: "blur",
                            }],
                        },{
                            label: '显示的属性',
                            prop: 'text2',
                            tip: '选择数据后，显示到字段上的信息所属的属性，一般都是name,如果是多个属性使用逗号分割，如id,name',
                            tipPlacement: 'right',
                            span: 7,
                            rules: [{
                                required: true,
                                message: "(显示的属性)必填项不能为空",
                                trigger: "blur",
                            }],
                        },{
                            label: '存储值的属性',
                            prop: 'text2',
                            tip: '选择数据后，保存到数据库里的属性，一般都是oid或者id，如果是多个属性使用逗号分割，如oid ,id',
                            tipPlacement: 'right',
                            span: 7,
                            rules: [{
                                required: true,
                                message: "(存储值的属性)必填项不能为空",
                                trigger: "blur",
                            }],
                        },{
                            label: '参照窗口类型',
                            prop: 'referWindowType',
                            //tip: '我是一个左边提示语',
                            //tipPlacement: 'left',
                            span: 7,
                            type: 'select',
                            dicData: [{
                                label: '默认样式',
                                value: 0
                            }, {
                                label: '平台配置',
                                value: 1
                            }, {
                                label: '树形',
                                value: 2
                            }, {
                                label: '列表',
                                value: 3
                            }, {
                                label: '部门树',
                                value: 4
                            }, {
                                label: '部门列表',
                                value: 5
                            }, {
                                label: '用户',
                                value: 6
                            }, {
                                label: '用户列表',
                                value: 7
                            }, {
                                label: '角色列表',
                                value: 8
                            }, {
                                label: '职务',
                                value: 9
                            }, {
                                label: '工种',
                                value: 10
                            }, {
                                label: '流程模板',
                                value: 11
                            }],
                            rules: [{
                                required: true,
                                message: "(参照窗口类型)必填项不能为空",
                                trigger: "blur",
                            }],
                        },{
                            label: '自定义的后台路径',
                            prop: 'text2',
                            tip: '通常为空;如果是列表，后台必须返回DataGrid，如果是树，后台必须返回List',
                            tipPlacement: 'right',
                            span: 7,
                        },{
                            label: '服务的地址',
                            prop: 'text2',
                            tip: '通常为空，在支持微服务或者分布式部署的时候才配置',
                            tipPlacement: 'right',
                            span: 7,
                        },{
                            label: '请求后台的协议方式',
                            prop: 'text2',
                            //tip: '',
                            //tipPlacement: 'right',
                            span: 7,
                            type: 'select',
                        },{
                            label: '窗口显示的高度',
                            prop: 'text2',
                            tip: '默认空着，设置后表示强制显示这样的高度',
                            tipPlacement: 'right',
                            span: 7,
                        },{
                            label: '过滤(级联)属性',
                            prop: 'text2',
                            tip: '获取表单上的其他属性的属性的值来过滤,或者使用某个属性来级联选择',
                            tipPlacement: 'right',
                            span: 7,
                        },{
                            label: '过滤属性请求参数',
                            prop: 'text2',
                            tip: '使用过滤属性时，发送给后台的请求参数',
                            tipPlacement: 'right',
                            span: 7,
                        },{
                            label: '是否多选',
                            type: 'switch',
                            prop: 'text2',
                            //tip: '',
                            //tipPlacement: 'right',
                            span: 7,
                            row: true,
                        },{
                            label: '映射其他属性',
                            prop: 'text2',
                            tip: '选择数据后，将选择的数据拷贝到表单里的其他属性，书写格式为{当前表单上的属性:选择数据里的属性,XXXXx:yyyy}',
                            tipPlacement: 'right',
                            span: 18,
                        }
                    ],
                    // 变动的表单区域
                    group: [
                        {   
                            display: this.form.referWindowType==0||this.form.referWindowType==3,
                            icon: 'el-icon-info',
                            label: this.form.referWindowType==0 ? '默认参照的配置(下方列表)':'列表参照的配置（下方列表)',
                            collapse: true,
                            prop: 'group1',
                            column: [
                                {
                                    label: '每页显示条数',
                                    prop: 'text1',
                                    span: 7,
                                    tip: '分页时每页显示的数量，不分页填-1',
                                    tipPlacement: 'right',
                                },{
                                    label: '排序字段',
                                    prop: 'text1',
                                    span: 7,
                                    type: 'table',
                                    children: {
                                        border: true,
                                        column: [{
                                            label: '属性英文编号',
                                            width: 120,
                                            search: true,
                                            searchSpan: 8,
                                            searchLabelWidth: 100,
                                            prop: 'id'
                                        },{
                                            label: '属性中文名称',
                                            search: true,
                                            searchSpan: 8,
                                            searchLabelWidth: 100,
                                            prop: 'name'
                                        },{
                                            label: '属性长度',
                                            search: false,
                                            prop: 'attrLength'
                                        },{
                                            label: '属性类型',
                                            search: false,
                                            prop: 'attrType'
                                        }],
                                    },
                                },{
                                    label: '排序类型',
                                    prop: 'text1',
                                    span: 7,
                                    type: 'select',
                                    tip: '查询数据时的排序类型',
                                    tipPlacement: 'right',
                                }
                            ]
                        },
                        {   
                            display: this.form.referWindowType==1,
                            icon: 'el-icon-info',
                            label: 'stand(平台配置)参照',
                            collapse: true,
                            prop: 'group2',
                            column: [
                                {
                                    label: '参考的UI上下文',
                                    prop: 'text1',
                                    span: 7,
                                    tip: '只有参照窗口类型是stand时才必须设置,且在stand类型下才能生效',
                                    tipPlacement: 'right',
                                },
                                {
                                    label: '平台的表格编号',
                                    prop: 'text1',
                                    span: 7,
                                    tip: '与参照的UI上下文互斥，只有参照窗口类型是stand时才必须设置，且在stand类型下才能生效',
                                    tipPlacement: 'right',
                                    type: 'table',
                                    children: {
                                        border: true,
                                        column: [{
                                            label: '属性英文编号',
                                            width: 120,
                                            search: true,
                                            searchSpan: 8,
                                            searchLabelWidth: 100,
                                            prop: 'id'
                                        },{
                                            label: '属性中文名称',
                                            search: true,
                                            searchSpan: 8,
                                            searchLabelWidth: 100,
                                            prop: 'name'
                                        },{
                                            label: '属性长度',
                                            search: false,
                                            prop: 'attrLength'
                                        },{
                                            label: '属性类型',
                                            search: false,
                                            prop: 'attrType'
                                        }],
                                    },
                                },
                            ]
                        },
                        {   
                            display: this.form.referWindowType==2,
                            icon: 'el-icon-info',
                            label: '树形参照信息',
                            collapse: true,
                            prop: 'group3',
                            labelWidth: '158',
                            column: [
                                {
                                    label: '树形的上级树形',
                                    prop: 'text1',
                                    span: 7,
                                    tip: '树形展示的时候，上下级关系查找的属性。',
                                    tipPlacement: 'right',
                                },{
                                    label: '上级属性值对应属性',
                                    prop: 'text1',
                                    span: 7,
                                    tip: '上级属性存储的值,是上级数据的什么属性。一般都是oid。',
                                    tipPlacement: 'right',
                                },{
                                    label: '根节点的值',
                                    prop: 'text1',
                                    span: 7,
                                    tip: '树形展示的时候，上级的值。',
                                    tipPlacement: 'right',
                                },{
                                    label: '树加载方式',
                                    prop: 'text1',
                                    span: 7,
                                    type: 'select',
                                },{
                                    label: '是否只能选择叶子节点',
                                    prop: 'text1',
                                    span: 7,
                                    type: 'switch',
                                },{
                                    label: '排序字段',
                                    prop: 'text1',
                                    span: 7,
                                    type: 'table',
                                    children: {
                                        border: true,
                                        column: [{
                                            label: '属性英文编号',
                                            width: 120,
                                            search: true,
                                            searchSpan: 8,
                                            searchLabelWidth: 100,
                                            prop: 'id'
                                        },{
                                            label: '属性中文名称',
                                            search: true,
                                            searchSpan: 8,
                                            searchLabelWidth: 100,
                                            prop: 'name'
                                        },{
                                            label: '属性长度',
                                            search: false,
                                            prop: 'attrLength'
                                        },{
                                            label: '属性类型',
                                            search: false,
                                            prop: 'attrType'
                                        }],
                                    },
                                },{
                                    label: '排序类型',
                                    prop: 'text1',
                                    span: 7,
                                    type: 'select',
                                },
                            ]
                        },
                    ]
                }
            },
        },
        methods: {
            // 选择完参照配置之后点击保存按钮触发
            selectedListReferConfig(){
                console.log(this.option);
                console.log(this.form.referWindowType);
            },
            /** 其实选取属性表格的默认数据不需要加载，
             但是弹窗打开会有表格错行问题所以需要在这调用doLayout方法*/
            onloadAttrData(){
                this.$nextTick(() => {
                    this.$refs.crudAttr.doLayout()
                })
            },
            // 属性选择表格中的移除按钮功能
            removeCurrentRow(row,condition){
                if(condition=='removeAttr'){
                    this.$delete(this.attrData, row.$index);
                    return;
                }
                this.$delete(this.addSearchCondtionData, row.$index);
            },
            // 该界面的数据进行初始化复原
            recoveryDataAndForm(condition){
                if(condition=='initForm'){
                    this.form = this.$options.data().form;
                    return;
                }
                Object.assign(this.$data,this.$options.data());         
            },
            // 打开添加查询条件对话框
            openAddSearchOrAttrDialog(condition){
                if(condition=='addSearchCondition'){
                    console.log('this is open addSearchCondition');
                }else {
                    console.log('this is open selectAttr');
                }
import referConfigFormDialog from "./referConfigFormDialog.vue";
import referConfigCrudDialog from "./referConfigCrudDialog.vue";
import func from "@/util/func";
export default {
    name: "referConfigDialog",
    props: ["referConfigOption","display"],
    components: {referConfigFormDialog, referConfigCrudDialog},
    data() {
        return {
        };
    },
    watch:{
        referConfigOption (){
          console.log(111)
            if(func.notEmpty(this.referConfigOption.referConfig) || func.notEmpty(this.referConfigOption.referBtmId)){
                this.openReconfigInterFace(this.referConfigOption);
            }else{
                this.openTipsChooseOrCust();
            }
        }
    };
        },
    },
    methods: {
        echoReferConfig(value) {
            this.emitData = value;
        },
        // 当前已存在编辑过的参照配置，所以直接打开参照配置界面
        openReconfigInterFace(preReferConfigForm){
            const form = preReferConfigForm;
            let data = {
                referTypeName: form.referBtmName || '',
                referType: form.referBtmId || '',
            }
            if(this.referConfigOption.referConfig){
                // 编辑码段时referConfig可能会在为【参照引用的业务类型】选取值之后改变
                let referConfigValue =JSON.parse(form.referConfig);
                if(referConfigValue.referType != form.referBtmId && data.referType){
                    referConfigValue.referType = form.referBtmId || '';
                    referConfigValue.referTypeName = form.referBtmName || form.referBtmId;
                    this.referConfigOption.referConfig = JSON.stringify(referConfigValue);
                }
                this.$set(data,"referConfig",this.referConfigOption.referConfig)
            }
            // 首次点击报错未定义
            this.$nextTick(()=>{
                this.$refs.referConfigFormDialog.isShowReferConfigForm = true;
                this.$refs.referConfigFormDialog.initPageData(data);
            })
        },
        // 打开自定义参照配置或直接选择参照配置的提示框
        openTipsChooseOrCust(){
            this.$confirm('请选择参照配置的定义方式？','参照配置的方式', {
                distinguishCancelAndClose: true,
                closeOnClickModal: false,
                confirmButtonText: '自定义参照配置',
                cancelButtonText: '直接选择参照配置'
            })
            .then(() => {
                // 打开自定参照配置对话框
                this.$refs.referConfigFormDialog.isShowReferConfigForm = true;
            })
            .catch(action => {
                if (action === "cancel") {
                    // 打开直接选择参照配置对话框
                    this.$refs.referConfigCrudDialog.isShowReferConfigCrud = true;

                }
            });
        },
        /* 引用码段参照配置,子组件填完参照配置之后内容回显时调用 */
        echoReferConfig(content){
            this.$emit('setReferConfigValue', content) // 触发update:data将子组件值传递给父组件
        },

    },
}
</script>

<style>

    /* 提示文本出现的速度 */
    .el-tooltip__popper{
        width: 200px !important;
        transition-duration: 0.2s !important;
        transition-delay: 0.1s !important;
    }
    /* 提示文本消失时的速度 */
    .fel-fade-in-linear-leave-active,.el-fade-in-linear-leave-to{
        -webkit-transition:opacity .0s !important;
        transition:opacity .0s !important;
    }
    
</style>
</style>