集成默认页面

 Source/UBCS-WEB/package-lock.json

@@ -17,6 +17,7 @@
        "js-base64": "^2.5.1",
        "js-cookie": "^2.2.0",
        "js-md5": "^0.7.3",
        "js-pinyin": "^0.2.4",
        "mockjs": "^1.0.1-beta3",
        "node-gyp": "^5.0.6",
        "nprogress": "^0.2.0",
@@ -9264,6 +9265,11 @@
        "node": ">=0.6.0"
      }
    },
    "node_modules/js-pinyin": {
      "version": "0.2.4",
      "resolved": "https://registry.npmjs.org/js-pinyin/-/js-pinyin-0.2.4.tgz",
      "integrity": "sha512-JyWqZqdypu5R8QqTHRV/w6Y+3sxFqiTrnbodAj0d5SwfHIHg0gJBmsXv+kXd6NHkHrk37VrQ7WaAwungX+Ny0Q=="
    },
    "node_modules/js-queue": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/js-queue/-/js-queue-2.0.2.tgz",

 Source/UBCS-WEB/package.json

@@ -20,6 +20,7 @@
    "js-base64": "^2.5.1",
    "js-cookie": "^2.2.0",
    "js-md5": "^0.7.3",
    "js-pinyin": "^0.2.4",
    "mockjs": "^1.0.1-beta3",
    "node-gyp": "^5.0.6",
    "nprogress": "^0.2.0",

 Source/UBCS-WEB/src/components/transfer/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,224 @@
<template>
    <div class="el-transfer">
        <transfer-panel v-bind="$props" ref="leftPanel" :data="sourceData" :title="titles[0] || t('el.transfer.titles.0')"
            :default-checked="leftDefaultChecked" :placeholder="filterPlaceholder || t('el.transfer.filterPlaceholder')"
            @checked-change="onSourceCheckedChange">
            <slot name="left-footer"></slot>
        </transfer-panel>
        <div class="el-transfer__buttons">
            <el-button type="primary" :class="['el-transfer__button', hasButtonTexts ? 'is-with-texts' : '']"
                @click.native="addToLeft" :disabled="rightChecked.length === 0">
                <i class="el-icon-arrow-left"></i>
                <span v-if="buttonTexts[0] !== undefined">{{ buttonTexts[0] }}</span>
            </el-button>
            <el-button type="primary" :class="['el-transfer__button', hasButtonTexts ? 'is-with-texts' : '']"
                @click.native="addToRight" :disabled="leftChecked.length === 0">
                <span v-if="buttonTexts[1] !== undefined">{{ buttonTexts[1] }}</span>
                <i class="el-icon-arrow-right"></i>
            </el-button>
        </div>
        <transfer-panel v-bind="$props" ref="rightPanel" :data="targetData" :title="titles[1] || t('el.transfer.titles.1')"
            :default-checked="rightDefaultChecked" :placeholder="filterPlaceholder || t('el.transfer.filterPlaceholder')"
            @checked-change="onTargetCheckedChange">
            <slot name="right-footer"></slot>
        </transfer-panel>
    </div>
</template>
  
<script>
import ElButton from 'element-ui/packages/button';
import Emitter from 'element-ui/src/mixins/emitter';
import Locale from 'element-ui/src/mixins/locale';
import TransferPanel from './transfer-panel.vue';
// import TransferPanel from './transfer-panel2.vue';
import Migrating from 'element-ui/src/mixins/migrating';

export default {
    name: 'ElTransfer',

    mixins: [Emitter, Locale, Migrating],

    components: {
        TransferPanel,
        ElButton
    },

    props: {
        data: {
            type: Array,
            default() {
                return [];
            }
        },
        titles: {
            type: Array,
            default() {
                return [];
            }
        },
        buttonTexts: {
            type: Array,
            default() {
                return [];
            }
        },
        filterPlaceholder: {
            type: String,
            default: ''
        },
        filterMethod: Function,
        leftDefaultChecked: {
            type: Array,
            default() {
                return [];
            }
        },
        rightDefaultChecked: {
            type: Array,
            default() {
                return [];
            }
        },
        renderContent: Function,
        value: {
            type: Array,
            default() {
                return [];
            }
        },
        format: {
            type: Object,
            default() {
                return {};
            }
        },
        filterable: Boolean,
        props: {
            type: Object,
            default() {
                return {
                    label: 'label',
                    key: 'key',
                    disabled: 'disabled'
                };
            }
        },
        targetOrder: {
            type: String,
            default: 'original'
        }
    },

    data() {
        return {
            leftChecked: [],
            rightChecked: []
        };
    },

    computed: {
        dataObj() {
            const key = this.props.key;
            return this.data.reduce((o, cur) => (o[cur[key]] = cur) && o, {});
        },

        sourceData() {
            return this.data.filter(item => this.value.indexOf(item[this.props.key]) === -1);
        },

        targetData() {
            if (this.targetOrder === 'original') {
                return this.data.filter(item => this.value.indexOf(item[this.props.key]) > -1);
            } else {
                return this.value.reduce((arr, cur) => {
                    const val = this.dataObj[cur];
                    if (val) {
                        arr.push(val);
                    }
                    return arr;
                }, []);
            }
        },

        hasButtonTexts() {
            return this.buttonTexts.length === 2;
        }
    },

    watch: {
        value:{
            handler(val) {
            this.dispatch('ElFormItem', 'el.form.change', val);
        },
        immediate:true,
        deep:true
    }
    },

    methods: {
        getMigratingConfig() {
            return {
                props: {
                    'footer-format': 'footer-format is renamed to format.'
                }
            };
        },

        onSourceCheckedChange(val, movedKeys) {
            this.leftChecked = val;
            if (movedKeys === undefined) return;
            this.$emit('left-check-change', val, movedKeys);
        },

        onTargetCheckedChange(val, movedKeys) {
            this.rightChecked = val;
            if (movedKeys === undefined) return;
            this.$emit('right-check-change', val, movedKeys);
        },

        addToLeft() {
            let currentValue = this.value.slice();
            this.rightChecked.forEach(item => {
                const index = currentValue.indexOf(item);
                if (index > -1) {
                    currentValue.splice(index, 1);
                }
            });
            this.$emit('input', currentValue);
            this.$emit('change', currentValue, 'left', this.rightChecked);
        },

        addToRight() {
            let currentValue = this.value.slice();
            let itemsToBeMoved = [];
            const key = this.props.key;
            this.data.forEach(item => {
                const itemKey = item[key];
                if (
                    this.leftChecked.indexOf(itemKey) > -1 &&
                    this.value.indexOf(itemKey) === -1
                ) {
                    // itemsToBeMoved.push(itemKey)
                    itemsToBeMoved = [itemKey]
                    console.log(itemsToBeMoved)
                }
            });
            // currentValue = this.targetOrder === 'unshift'
            //     ? itemsToBeMoved.concat(currentValue)
            //     : currentValue.concat(itemsToBeMoved);
            currentValue = itemsToBeMoved
            this.$emit('input', currentValue);
            this.$emit('change', currentValue, 'right', this.leftChecked);
        },

        clearQuery(which) {
            if (which === 'left') {
                this.$refs.leftPanel.query = '';
            } else if (which === 'right') {
                this.$refs.rightPanel.query = '';
            }
        }
    }
};
</script>
  

 Source/UBCS-WEB/src/components/transfer/transfer-panel.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,232 @@
<template>
    <div class="el-transfer-panel">
        <p class="el-transfer-panel__header">
                {{ title }}
        </p>

        <div :class="['el-transfer-panel__body', hasFooter ? 'is-with-footer' : '']">
            <el-input class="el-transfer-panel__filter" v-model="query" size="small" :placeholder="placeholder"
                @mouseenter.native="inputHover = true" @mouseleave.native="inputHover = false" v-if="filterable">
                <i slot="prefix" :class="['el-input__icon', 'el-icon-' + inputIcon]" @click="clearQuery"></i>
            </el-input>

            <el-radio-group v-model="checked" v-show="!hasNoMatch && data.length > 0"
                :class="{ 'is-filterable': filterable }" class="el-transfer-panel__list">
                <el-radio class="el-transfer-panel__item" :label="item[keyProp]" :disabled="item[disabledProp]"
                    :key="item[keyProp]" v-for="item in filteredData"><option-content
                        :option="item"></option-content></el-radio>
            </el-radio-group>
            <p class="el-transfer-panel__empty" v-show="hasNoMatch">{{ t('el.transfer.noMatch') }}</p>
            <p class="el-transfer-panel__empty" v-show="data.length === 0 && !hasNoMatch">{{ t('el.transfer.noData') }}</p>
        </div>
        <p class="el-transfer-panel__footer" v-if="hasFooter">
            <slot></slot>
        </p>
    </div>
</template>
  
<script>
import ElCheckboxGroup from 'element-ui/packages/checkbox-group';
import ElCheckbox from 'element-ui/packages/checkbox';
import ElInput from 'element-ui/packages/input';
import Locale from 'element-ui/src/mixins/locale';

export default {
    mixins: [Locale],

    name: 'ElTransferPanel',

    componentName: 'ElTransferPanel',

    components: {
        ElCheckboxGroup,
        ElCheckbox,
        ElInput,
        OptionContent: {
            props: {
                option: Object
            },
            render(h) {
                const getParent = vm => {
                    if (vm.$options.componentName === 'ElTransferPanel') {
                        return vm;
                    } else if (vm.$parent) {
                        return getParent(vm.$parent);
                    } else {
                        return vm;
                    }
                };
                const panel = getParent(this);
                const transfer = panel.$parent || panel;
                return panel.renderContent
                    ? panel.renderContent(h, this.option)
                    : transfer.$scopedSlots.default
                        ? transfer.$scopedSlots.default({ option: this.option })
                        : <span>{this.option[panel.labelProp] || this.option[panel.keyProp]}</span>;
            }
        }
    },

    props: {
        data: {
            type: Array,
            default() {
                return [];
            }
        },
        renderContent: Function,
        placeholder: String,
        title: String,
        filterable: Boolean,
        format: Object,
        filterMethod: Function,
        defaultChecked: Array,
        props: Object
    },

    data() {
        return {
            checked: [],
            allChecked: false,
            query: '',
            inputHover: false,
            checkChangeByUser: true
        };
    },

    watch: {
        checked(val, oldVal) {
            this.updateAllChecked();
            let vals = Array.isArray(val)? val:[val]
            let oldVals = Array.isArray(oldVal)? oldVal:[oldVal]
            if (this.checkChangeByUser) {
                const movedKeys = vals.concat(oldVals)
                    .filter(v => vals.indexOf(v) === -1 || oldVals.indexOf(v) === -1);
                this.$emit('checked-change', vals,movedKeys);
            } else {
                this.$emit('checked-change', vals);
                this.checkChangeByUser = true;
            }
        },

        data() {
            const checked = [];
            const filteredDataKeys = this.filteredData.map(item => item[this.keyProp]);
            let checkeds = Array.isArray(this.checked)? this.checked:[this.checked]
            checkeds.forEach(item => {
                if (filteredDataKeys.indexOf(item) > -1) {
                    checked.push(item);
                }
            });
            this.checkChangeByUser = false;
            this.checked = checked;
        },

        checkableData() {
            this.updateAllChecked();
        },

        defaultChecked: {
            immediate: true,
            handler(val, oldVal) {
                if (oldVal && val.length === oldVal.length &&
                    val.every(item => oldVal.indexOf(item) > -1)) return;
                const checked = [];
                const checkableDataKeys = this.checkableData.map(item => item[this.keyProp]);
                val.forEach(item => {
                    if (checkableDataKeys.indexOf(item) > -1) {
                        checked.push(item);
                    }
                });
                this.checkChangeByUser = false;
                this.checked = checked;
            }
        }
    },

    computed: {
        filteredData() {
            return this.data.filter(item => {
                console.log(item)
                if (typeof this.filterMethod === 'function') {
                    return this.filterMethod(this.query, item);
                } else {
                    const label = item[this.labelProp] || item[this.keyProp].toString();
                    return label.toLowerCase().indexOf(this.query.toLowerCase()) > -1;
                }
            });
        },

        checkableData() {
            return this.filteredData.filter(item => !item[this.disabledProp]);
        },

        checkedSummary() {
            const checkedLength = this.checked.length;
            const dataLength = this.data.length;
            const { noChecked, hasChecked } = this.format;
            if (noChecked && hasChecked) {
                return checkedLength > 0
                    ? hasChecked.replace(/\${checked}/g, checkedLength).replace(/\${total}/g, dataLength)
                    : noChecked.replace(/\${total}/g, dataLength);
            } else {
                return `${checkedLength}/${dataLength}`;
            }
        },

        isIndeterminate() {
            const checkedLength = this.checked.length;
            return checkedLength > 0 && checkedLength < this.checkableData.length;
        },

        hasNoMatch() {
            return this.query.length > 0 && this.filteredData.length === 0;
        },

        inputIcon() {
            return this.query.length > 0 && this.inputHover
                ? 'circle-close'
                : 'search';
        },

        labelProp() {
            return this.props.label || 'label';
        },

        keyProp() {
            return this.props.key || 'key';
        },

        disabledProp() {
            return this.props.disabled || 'disabled';
        },

        hasFooter() {
            return !!this.$slots.default;
        }
    },

    methods: {
        updateAllChecked() {
            
            const checkableDataKeys = this.checkableData.map(item => item[this.keyProp]);
          
            this.allChecked = checkableDataKeys.length > 0 &&
                checkableDataKeys.every(item => this.checked===item);
        },

        handleAllCheckedChange(value) {
            this.checked = value
                ? this.checkableData.map(item => item[this.keyProp])
                : [];
        },

        clearQuery() {
            if (this.inputIcon === 'circle-close') {
                this.query = '';
            }
        }
    }
};
</script>
  

 Source/UBCS-WEB/src/views/flow/flowPath.vue

@@ -12,7 +12,10 @@
                            <el-tab-pane label="流程跟踪" name="second">
                                <avue-crud :data="data" :option="option" ref="crud">
                                </avue-crud>
                                <el-image style="width: 100%; height: 100%" :src="url" fit="cover"></el-image>
                                <div style="padding: 10px 0; width: 100%; height: 100% ">
                                    <el-image :src="url" flt="fill"></el-image>
                                </div>
                                
                            </el-tab-pane>
                        </el-tabs>
                    </el-card>
@@ -25,7 +28,7 @@
                        </div>
                        <div style="width: 100%;">
                            <p>请在下方输入您的审批意见：</p>
                            <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="opinionVal">
                            <el-input type="textarea" :rows="4" placeholder="请输入内容" show-word-limit v-model="opinionVal">
                            </el-input>
                        </div>
                        <div style="width: 100%;">

 Source/UBCS-WEB/src/views/integration/integrationIndex.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,342 @@
<template>
    <div>
        <el-container style="height: 100%; border: 1px solid #fff">
            <el-card :style="{ marginRight: '10px' }">
                <el-aside width="300px" style="background-color: #fff">
                    <el-input placeholder="输入关键字进行过滤" v-model="filterText">
                    </el-input>
                    <el-menu :default-openeds="['1', '3']">
                        <el-tree class="filter-tree" :data="treeData" :props="defaultProps" default-expand-all
                            :filter-node-method="filterNode" ref="tree">
                        </el-tree>
                    </el-menu>
                </el-aside>
            </el-card>
            <el-main>
                <el-card>
                    <avue-crud :data="tableData" :option="option" ref="crud" @row-update="addUpdate" @row-save="rowSave"
                        @row-click="handleRowClick">
                        <template slot="menuLeft">
                            <el-button icon="el-icon-plus" size="small" type="primary" @click="dialogPush = true">新 å¢ž
                            </el-button>
                            <el-button icon="el-icon-check" size="small" type="primary" @click="handleSave">保 å­˜
                            </el-button>
                            <el-button icon="el-icon-connection" size="small" type="primary" @click="handleSync">同步模型
                            </el-button>
                        </template>
                    </avue-crud>
                    <el-card :style="{ marginTop: '20px' }">
                        <avue-crud :data="tableData" :option="optinos" ref="crud" @row-update="addUpdate"
                            @row-save="rowSave" @row-click="handleRowClick">
                        </avue-crud>
                    </el-card>
                </el-card>
                <el-dialog title="编码属性" :visible.sync="dialogPush" destroy-on-close append-to-body="true" width="30%"
                    :before-close="handleClose">
                    <el-form :model="form">
                        <el-form-item label="查询条件" label-width="70px" size="small">
                            <el-input v-model="form.name" autocomplete="off" @change="handleQuery"></el-input>
                        </el-form-item>
                    </el-form>
                    <p class="text_tip">*选择分类进行属性过滤, æˆ–者输入属性的全拼或者简拼进行查询! å¦‚: å§“名 (可输入xm或xinming )</p>
                    <transfer v-model="transferValue" :data="transferData" :filter-method="filterMethod"
                        filter-placeholder="请输入属性拼音全拼或者拼音缩写" @left-check-change="handelLeftCheck"></transfer>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogPush = false">取 æ¶ˆ</el-button>
                        <el-button type="primary" @click="dialogVisible = false">保 å­˜</el-button>
                    </span>
                </el-dialog>
            </el-main>
        </el-container>
    </div>
</template>
<script>
import transfer from '@/components/transfer/index'
import pinyin from 'js-pinyin'
export default {
    components: {
        transfer
    },
    data() {
        const generateData = () => {
            pinyin.setOptions({ checkPolyphone: false, charCase: 1 });
            const data = [];
            const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];
            cities.forEach((city, index) => {
                data.push({
                    label: city,
                    key: index,
                    pinyin: pinyin.getFullChars(city),
                    pinyins: pinyin.getCamelChars(city),
                });
            });
            return data;
        };
        return {
            form: {
                name: '',
            },
            transferData: generateData(),
            transferValue: [],
            dialogPush: false,
            tableData: [
                {
                    id: 1,
                    groupTypeName: '人员',
                    codeView: '编码视图',
                    sex: '性别',
                    typeName: '螺栓',
                    attributeName: '',
                    defaultValue: '',
                },
                {
                    id: 2,
                    groupTypeName: '人员',
                    codeView: '编码视图',
                    sex: '性别',
                    typeName: '螺栓',
                    attributeName: '',
                    defaultValue: '',
                },
                {
                    id: 3,
                    groupTypeName: '人员',
                    codeView: '编码视图',
                    sex: '性别',
                    typeName: '螺栓',
                    attributeName: '',
                    defaultValue: '',
                },
                {
                    id: 3,
                    groupTypeName: '人员',
                    codeView: '编码视图',
                    sex: '性别',
                    typeName: '螺栓',
                    attributeName: '',
                    defaultValue: '',
                },
                {
                    id: 3,
                    groupTypeName: '人员',
                    codeView: '编码视图',
                    sex: '性别',
                    typeName: '螺栓',
                    attributeName: '',
                    defaultValue: '',
                },
                {
                    id: 3,
                    groupTypeName: '人员',
                    codeView: '编码视图',
                    sex: '性别',
                    typeName: '螺栓',
                    attributeName: '',
                    defaultValue: '',
                },
                {
                    id: 3,
                    groupTypeName: '人员',
                    codeView: '编码视图',
                    sex: '性别',
                    typeName: '螺栓',
                    attributeName: '',
                    defaultValue: '',
                },
                {
                    id: 3,
                    groupTypeName: '人员',
                    codeView: '编码视图',
                    sex: '性别',
                    typeName: '螺栓',
                    attributeName: '',
                    defaultValue: '',
                },
                {
                    id: 3,
                    groupTypeName: '人员',
                    codeView: '编码视图',
                    sex: '性别',
                    typeName: '螺栓',
                    attributeName: '',
                    defaultValue: '',
                }
            ],
            filterText: '',
            optinos: {
                title: '集团属性',
                maxHeight: '300px',
                menu: true,
                delBtn: false,
                addBtn: false,
                index: true,
                header: false,
                columnBtn: false,
                searchShow: true,
                emptyBtn: false,
                searchBtn: false,
                searchShowBtn: false,
                cellBtn: true,
                border: true,
                searchMenuSpan: 8,
                column: [
                    { label: '属性集团枚举值', prop: 'groupTypeName', minWidth: 80, },
                    { label: '集团属性枚举显示名称', prop: 'codeView', minWidth: 80 },
                    { label: 'MDM枚举值', prop: 'sex', minWidth: 80 },
                    { label: 'MDM枚举显示名称', prop: 'typeName', minWidth: 80, overHidden: true },
                ]
            },
            option: {
                maxHeight: '500px',
                menu: true,
                delBtn: false,
                addBtn: false,
                index: true,
                header: true,
                columnBtn: false,
                searchShow: true,
                emptyBtn: false,
                searchBtn: false,
                searchShowBtn: false,
                cellBtn: true,
                border: true,
                searchMenuSpan: 8,
                column: [
                    {
                        label: '集团分类',
                        prop: 'groupTypeName',
                        minWidth: 80,
                        type: "select",
                        dicUrl: "/api/ubcs-system/dict/dictionary?code=org_category",
                        props: {
                            label: "dictValue",
                            value: "dictKey"
                        },
                        slot: true,
                        search: true,
                        rules: [{
                            message: "请输入集团分类名称"
                        }]
                    },
                    { label: '所属视图', prop: 'codeView', minWidth: 80 },
                    { label: '集团属性', prop: 'sex', minWidth: 80 },
                    { label: '分类名称', prop: 'typeName', minWidth: 80, overHidden: true },
                    { label: '属性名称', prop: 'attributeName', minWidth: 80, cell: true },
                    { label: '默认值', prop: 'defaultValue', minWidth: 140, cell: true },
                ]
            },
            treeData: [{
                id: 1,
                label: '一级 1',
                children: [{
                    id: 4,
                    label: '二级 1-1',
                    children: [{
                        id: 9,
                        label: '三级 1-1-1'
                    }, {
                        id: 10,
                        label: '三级 1-1-2'
                    }]
                }]
            }, {
                id: 2,
                label: '一级 2',
                children: [{
                    id: 5,
                    label: '二级 2-1'
                }, {
                    id: 6,
                    label: '二级 2-2'
                }]
            }, {
                id: 3,
                label: '一级 3',
                children: [{
                    id: 7,
                    label: '二级 3-1'
                }, {
                    id: 8,
                    label: '二级 3-2'
                }]
            }],
            defaultProps: {
                children: 'children',
                label: 'label'
            }
        }
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },
    created() {
        pinyin.setOptions({ checkPolyphone: false, charCase: 1 });
        console.log(pinyin.getFullChars('管理员'))
        console.log(pinyin.getCamelChars('管理员'))

    },
    methods: {
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        handleSave() {

        },
        handlePush() {

        },
        handelLeftCheck(event) {
            console.log(event)
        },
        addUpdate(event, done) {
            console.log(event)
            done()
        },
        rowSave(event, done) {
            console.log(event)
            done()
        },
        handleRowClick(row, event, column) {
            console.log(row)
            console.log(event)
            console.log(column)
        },
        handleQuery(event) {
            console.log(event)
            this.form.name = event
        },
        filterMethod(query, item) {
            return item.pinyins.indexOf(this.form.name) > -1;
        },
    }
}
</script>
<style lang="scss" scoped>
.text_tip {
    padding: 10px 0;
    color: #F56C6C;
}

/deep/ .el-transfer-panel__list {
    width: 100%;
}

/deep/ .el-input {
    width: auto;
}

/deep/ .el-transfer-panel {
    width: 270px;
}

/deep/ .el-transfer-panel__list {
    height: 370px;
}

/deep/ .el-transfer-panel__body {
    height: 370px;
}
</style>

 Source/UBCS-WEB/vue.config.js

@@ -26,10 +26,10 @@
    proxy: {
      '/api': {
        //本地服务接口地址
        // target: 'http://localhost:37000',
        //target: 'http://192.168.3.7:37000',
        //  target: 'http://localhost:37000',
        // target: 'http://192.168.3.7:37000',
        target: 'http://dev.vci-tech.com:37000',
        // target: 'http://192.168.1.51:37000/',
        //target: 'http://192.168.1.51:37000/',
        //远程演示服务地址,可用于直接启动项目
        // target: 'https://saber.bladex.vip/api',
        ws: true,