模板阶段

 Source/UBCS-WEB/src/api/template/flowpath.js

@@ -24,3 +24,43 @@
      data: params
    })
  }
// æ¨¡æ¿æµç¨‹åˆ é™¤
export const flowpathDelete = (params) => {
  return request({
    url: '/api/ubcs-flow/processTS/dt',
    method: 'delete',
    params: params
  })
}
// æ¨¡æ¿é˜¶æ®µåˆ—表
export const stagelist = (params) => {
  return request({
    url: '/api/ubcs-flow/processTS/sslist',
    method: 'get',
    params: params
  })
}
// å±žæ€§åˆ—表
export const attributeList = (params) => {
  return request({
    url: '/api/ubcs-code/codeTempPhaseController/gridUnUsedAttribute',
    method: 'get',
    params: params
  })
}
// å±žæ€§åˆ—表左侧
export const attributeListRight = (params) => {
  return request({
    url: '/api/ubcs-flow/processTS/ssslist',
    method: 'get',
    params: params
  })
}
// æ¨¡æ¿é˜¶æ®µåˆ—表
export const attributeSave = (params) => {
  return request({
    url: '/api/ubcs-flow/processTS/sasou',
    method: 'post',
    data: params
  })
}

 Source/UBCS-WEB/src/components/template/FlowPath.vue

@@ -3,22 +3,13 @@
        <avue-crud ref="crud" :table-loading="loading" :data="data" v-model="form" :option="option" :page.sync="page"
            :search.sync="search" @on-load="getDataList" @row-save="handleSave" @row-del="handleDelete"
            @row-update="handleEdit" @refresh-change="handleRefresh" @size-change="handleSizePage"
            @current-change="handleCurrentPage" @selection-change="selectionChange" @row-click="handleRowClick">
            <template slot="menuLeft">
                <el-button icon="el-icon-delete" size="small" type="danger" @click="handleDeleteByIds">删 é™¤
                </el-button>
            </template>
            <template slot="search" slot-scope="{row,size}">
                <el-input :placeholder="`请输入${selectValue === 'id' ? '系统编号' : '系统名称'}并按回车查询`" :size="size"
                    style="width:300px;margin-left: 10px;" v-model="search[selectValue]" clearable
                    @keyup.enter.native="handleEnter" @clear="handleClear"></el-input>
            </template>
            @current-change="handleCurrentPage">
        </avue-crud>
    </el-dialog>
</template>

<script>
import { getFlowpathList, getStartList, flowpathSave } from '@/api/template/flowpath.js'
import { getFlowpathList, getStartList, flowpathSave, flowpathDelete } from '@/api/template/flowpath.js'
export default {
    name: 'FlowPath',
    props: {
@@ -69,7 +60,6 @@
                    prop: 'id,name,description,version',
                    order: 'descending'
                },
                selection: true,
                column: [
                    {
                        label: '模板key',
@@ -89,7 +79,7 @@
                        nodeClick: (data) => {
                            console.log(data)
                            // èŠ‚点点击的时候会获取到数据
                            this.form.modeName = data.name
                            this.form.modelName = data.name
                        }
                    }, {
                        label: '模板名称',
@@ -136,7 +126,7 @@
            console.log(this.search)
            const { pageSize, currentPage } = this.page
            let param = { size: pageSize, current: currentPage }
            const response = await getFlowpathList({ ...param, ...this.search })
            const response = await getFlowpathList({ ...param, ...{ templateId: this.code } })
            if (response.status === 200) {
                console.log(response)
                this.loading = false
@@ -180,20 +170,27 @@
        },
        // åˆ é™¤å•æ¡
        handleDelete(row) {
            const { oid } = row
        },
        // å¤šæ¡æ•°æ®åˆ é™¤
        handleDeleteByIds() {

            console.log(row)
            const { id } = row
            this.deleteSysInfo({ id: id })
        },
        // åˆ é™¤æŽ¥å£
        deleteSysInfo(param) {
            this.$confirm('是否确定删除选择的集成系统?', '提示', {
            this.$confirm('是否确定删除选择的模板流程?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                // æŽ¥å£
                const response = await flowpathDelete(param)
                if (response.status === 200) {
                    console.log(response)
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getDataList()
                }
            })
        },
        // enter搜索
@@ -214,15 +211,6 @@
        },
        handleCurrentPage(event) {
            this.page.currentPage = event
        },
        // ç‚¹å‡»é€‰æ‹©
        handleRowClick(row) {
            this.$refs.crud.toggleRowSelection(row, true)
        },
        // å¤šé€‰
        selectionChange(list) {
            console.log(list)

        },
    }
}

 Source/UBCS-WEB/src/components/template/Stage.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,259 @@
<template>
    <el-dialog title="模板阶段" width="90%" append-to-body="true" :visible.sync="dialogVisible">
        <avue-crud ref="crud" :table-loading="loading" :data="data" :option="option" :page.sync="page"
            @on-load="getDataList" @size-change="handleSizePage" @current-change="handleCurrentPage"
            @row-click="handleRowClick">
            <template slot-scope="{type,size,row,index}" slot="menu">
                <el-button icon="el-icon-check" :size="size" :type="type"
                    @click="handleMaintenance(row, index)">维护</el-button>
            </template>
        </avue-crud>
        <el-dialog title="模板阶段" width="50%" append-to-body="true" :visible.sync="dialogNode">
            <avue-crud ref="crud" :table-loading="loading" :data="stageData" :option="stageOption" @on-load="getStagelist"
                @row-click="handleRowStageClick">
                <template slot-scope="{type,size,row,index}" slot="menu">
                    <el-button icon="el-icon-check" :size="size" :type="type"
                        @click="handleMaintenanceTransfer(row, index)">维护</el-button>
                </template>
            </avue-crud>
        </el-dialog>
        <table-transfer :visible.sync="dialogTransfer" v-model="listVal" :dataList="tableData" :columns="columns"
            keyName="oid" @save="handleSave"></table-transfer>
    </el-dialog>
</template>

<script>
import { getFlowpathList, stagelist, attributeListRight, attributeList, attributeSave } from '@/api/template/flowpath.js'
import TableTransfer from '@/components/template/TableTransfer'
export default {
    name: 'Stage',
    components: {
        TableTransfer
    },
    props: {
        // æ˜¯å¦æ‰“å¼€
        visible: {
            typeof: Boolean,
            default: false
        },
        code: {
            typeof: String,
            required: true,
            default: ""
        }
    },
    watch: {
        visible(n) {
            this.dialogVisible = n;
        },
        dialogVisible(n) {
            this.$emit('update:visible', n)
        },
    },
    computed: {
        tableData() {
            return this.setTable()
        },
        listVal() {
            let data = this.setTable()
            let newdata = data.map(item => {
                return item.checked ? item.oid : undefined
            })
            console.log(newdata.filter(item => item))
            return newdata.filter(item => item)
        }
    },
    data() {
        const options = {
            height: "auto",
            border: true,
            addBtn: false,
            align: 'center',
            menuAlign: 'center',
            index: true,
            searchMenuSpan: 8,
            searchBtn: false,
            emptyBtn: false,
            columnBtn: false,
            delBtn: false,
            refreshBtn: false,
            header: false,
            editBtn: false,
        }
        return {
            list: [],
            listRight: [],
            dialogVisible: this.visible,
            dialogTransfer: false,
            dialogNode: false,
            visibleTable: false,
            loading: false,
            page: {
                currentPage: 1,
                pageSize: 10,
                total: 0
            },
            modelKey: '',
            data: [],
            stageData: [],
            saveParam: {},
            columns: [
                {
                    key: "oid",
                    label: "oid",
                    visible: false,
                },
                {
                    key: "id",
                    label: "属性编号",
                    visible: true,
                },
                {
                    key: "name",
                    label: "属性名称",
                    visible: true,
                },
                {
                    key: "attributeGroup",
                    label: "属性分组",
                    visible: true,
                },
            ],
            option: {
                ...options,
                column: [
                    { label: '模板编号', prop: 'modelKey' },
                    { label: '模板名称', prop: 'modelName' },
                    { label: '描述', prop: 'buttonTypeValue' },
                ]
            },
            stageOption: {
                ...options,
                column: [
                    { label: '阶段编号', prop: 'taskId' },
                    { label: '阶段名称', prop: 'taskName' },
                ]
            },
        }
    },
    mounted() {
        this.getAttributeList()
    },
    methods: {
        setTable() {
            return this.list.map(item => {
                if (this.listRight.length !== 0) {
                    this.listRight.forEach(element => {
                        if (item.id === element.attrId) item.checked = true
                    });
                }
                return item
            })
        },
        // èŽ·å–列表
        async getDataList() {
            this.loading = false
            const { pageSize, currentPage } = this.page
            let param = { size: pageSize, current: currentPage }
            const response = await getFlowpathList({ ...param, ...{ templateId: this.code } })
            if (response.status === 200) {
                console.log(response)
                this.loading = false
                const data = response.data.data
                this.data = data.records
                this.page.total = data.total
            } else this.loading = false
        },
        // èŽ·å–阶段列表
        async getStagelist() {
            this.loading = false
            console.log(this.modelKey)
            const response = await stagelist({ modelKey: this.modelKey })
            if (response.status === 200) {
                this.loading = false
                console.log(response.data)
                this.stageData = response.data.data
            } else this.loading = false
        },
        // èŽ·å–全部属性
        async getAttributeList() {
            const response = await attributeList({ 'conditionMap[classifyTemplateOid]': this.code })
            if (response.status === 200) {
                const data = response.data.data
                this.list = data.records.map(item => {
                    const { oid, id, name, attributeGroup } = item
                    return { oid, id, name, attributeGroup, ...{ checked: false } }
                })
            }
        },
        // èŽ·å–已保存属性
        async getAttributeListRight() {
            const response = await attributeListRight({ templateId: this.code, modelKey: this.modelKey, taskId: this.saveParam.taskId })
            if (response.status === 200) {
                let data = response.data.data
                data = data.map(item => {
                    const { attrId, attrName, attrGroup } = item
                    return { attrId, attrName, attrGroup }
                })
                this.listRight = data
            }
        },
        // ç»´æŠ¤
        handleMaintenance(row) {
            console.log(row)
            this.dialogNode = true
            this.saveParam.modelKey = row.modelKey
        },
        handleMaintenanceTransfer(row) {
            console.log(row)
            this.dialogTransfer = true
            this.saveParam.taskId = row.taskId
            this.saveParam.taskName = row.taskName
            this.getAttributeListRight()
        },
        handleSizePage(event) {
            this.page.pageSize = event
        },
        handleCurrentPage(event) {
            this.page.currentPage = event
        },
        handleRowClick(row) {
            console.log(row)
            this.modelKey = row.modelKey
            this.saveParam.modelKey = row.modelKey
            this.dialogNode = true
        },
        handleRowStageClick(row) {
            this.dialogTransfer = true
            this.saveParam.taskId = row.taskId
            this.saveParam.taskName = row.taskName
            this.getAttributeListRight()
        },
        async handleSave(event) {
            console.log(event)
            const data = event.map(item => {
                const { id, name, attributeGroup } = item
                return { attrId: id, attrName: name, attrGroup: attributeGroup }
            })
            let param = {
                templateId: this.code,
                processStageAttr: data,
                ...this.saveParam
            }
            console.log(this.saveParam)
            console.log(data)
            const response = await attributeSave(param)
            if (response.status === 200) {
                // loading()
                console.log(response)
                this.$message({
                    type: 'success',
                    message: '新增数据成功！'
                })
                // done()
                // this.getDataList()
            }
        }
    }
}
</script>

 Source/UBCS-WEB/src/components/template/TableTransfer.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,322 @@
<template>
    <el-dialog :title="title" width="70%" append-to-body="true" :visible.sync="dialogVisible">
        <el-row :gutter="20">
            <el-col :span="11">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>初始数据</span>
                        <el-input class="input" v-if="showSearch" v-model="searchLeft" placeholder="请输入搜索内容"
                            @keyup.enter.native="handleEnter"></el-input>
                    </div>
                    <el-table ref="transferLeftTable" :data="leftData" height="500" highlight-current-row
                        tooltip-effect="dark" @selection-change="handleLeftSelectionChange" @row-click="handleLeftRowClick">
                        <el-table-column type="selection" width="50" align="center" fixed="left" :selectable="selectable" />
                        <div v-for="(item, index) in columns" :key="index">
                            <el-table-column v-if="item.visible" :label="item.label" align="center" :prop="item.key" />
                        </div>
                    </el-table>
                </el-card>
            </el-col>
            <el-col :span="2" class="btns" :style="{ height: '500px' }">
                <el-button class="btn" :disabled="leftMultiple" type="primary" icon="el-icon-arrow-right"
                    @click="moveToRight" circle></el-button>
                <el-button class="btn" :disabled="rightMultiple" type="primary" @click="moveToLeft"
                    icon="el-icon-arrow-left" circle></el-button>
            </el-col>
            <el-col :span="11">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>改变数据</span>
                        <el-input class="input" v-if="showSearch" v-model="searchRight" placeholder="请输入搜索内容"></el-input>
                    </div>
                    <el-table ref="transferRightTable" :data="rightData" height="500" highlight-current-row
                        tooltip-effect="dark" @selection-change="handleRightSelectionChange"
                        @row-click="handleRightRowClick">
                        <el-table-column type="selection" width="50" align="center" fixed="left" />
                        <div v-for="(item, index) in columns" :key="index">
                            <el-table-column v-if="item.visible" :label="item.label" align="center" :prop="item.key" />
                        </div>
                    </el-table>
                </el-card>
            </el-col>
        </el-row>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 æ¶ˆ</el-button>
            <el-button type="primary" @click="tableTransferSave">保存</el-button>
        </div>
    </el-dialog>
</template>

<script>
export default {
    name: 'TableTransfer',
    model: {
        prop: "value",
        event: "change",
    },
    props: {
        // æ˜¯å¦æ‰“å¼€
        visible: {
            typeof: Boolean,
            default: false
        },
        title: {
            typeof: String,
            default: '模板阶段维护'
        },
        //绑定数据
        value: {
            type: Array,
            default: () => {
                return [];
            },
        },
        //主键key值
        keyName: {
            type: String,
            default: "id",
        },
        columns: {
            type: Array,
            default: () => {
                return [];
            },
        },
        dataList: {
            type: Array,
            default: () => {
                return [];
            },
        },
        /**
         * æ˜¯å¦æ˜¾ç¤ºæœç´¢æ¡†
         */
        showSearch: {
            type: Boolean,
            default: true,
        },
    },

    watch: {
        visible(n) {
            this.dialogVisible = n;
        },
        dialogVisible(n) {
            this.$emit('update:visible', n)
        },
        searchLeft: {
            handler: function () {
                this.handleQueryLeft();
            },
            deep: true,
        },
        searchRight: {
            handler: function () {
                this.handleQueryRight();
            },
            deep: true,
        },
        dataList: {
            handler(data) {
                console.log(data)

            },
            deep: true,
        }
    },
    data() {
        return {
            dialogVisible: this.visible,
            searchLeft: "",
            leftIds: [],
            leftMultiple: true,
            leftDataList: [],
            leftData: [],
            searchRight: "",
            rightIds: [],
            rightMultiple: true,
            rightDataList: [],
            rightData: [],
        }
    },
    mounted() {
        this.init();
    },
    methods: {
        selectable(row, index) {
            console.log(row)
            return row.checked === false //为true的时候可以选，为false则不可选择
        },
        init() {
            this.rightIds = this.value;
            console.log(this.rightIds)
            for (let i = 0; i < this.dataList.length; i++) {
                if (this.value.some((item) => item == this.dataList[i][this.keyName])) {
                    this.rightDataList.push(this.dataList[i]);
                } else {
                    this.leftDataList.push(this.dataList[i]);
                }
            }
            this.leftData = [...this.leftDataList];
            this.rightData = [...this.rightDataList];
        },
        // left多选框选中数据
        handleLeftSelectionChange(selection) {
            this.leftIds = selection.map((item) => item[this.keyName]);
            this.leftMultiple = !selection.length;
        },
        // right多选框选中数据
        handleRightSelectionChange(selection) {
            this.rightIds = selection.map((item) => item[this.keyName]);
            this.rightMultiple = !selection.length;
        },
        // æŒ‰é’®ç‚¹å‡»
        moveToRight() {
            for (let i = 0; i < this.leftDataList.length; i++) {
                let a = this.leftIds.findIndex(
                    (item) => item == this.leftDataList[i][this.keyName]
                );
                console.log(a)
                if (a !== -1) {
                    this.rightDataList.push(this.leftDataList[i]);
                    // this.leftDataList[i].checked = true
                    // this.$refs.transferLeftTable.toggleRowSelection(this.leftDataList[i],true)
                    this.$delete(this.leftDataList, i);
                    i--;
                }
            }
            // let obj = {}
            // let filterright = this.rightDataList.reduce((cur, next) => {
            //     obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
            //     return cur;
            // }, [])
            // console.log('filterright', filterright)
            this.leftData = this.setData(this.leftDataList, this.searchLeft);
            this.rightData = this.setData(this.rightDataList, this.searchRight);
            this.$emit(
                "change",
                this.rightDataList.map((item) => item[this.keyName])
            );
        },
        // æŒ‰é’®ç‚¹å‡»
        moveToLeft() {
            for (let i = 0; i < this.rightDataList.length; i++) {
                let a = this.rightIds.findIndex(
                    (item) => item == this.rightDataList[i][this.keyName]
                );
                if (a !== -1) {
                    this.leftDataList.push(this.rightDataList[i]);
                    this.$delete(this.rightDataList, i);
                    i--;
                }
            }
            // let obj = {}
            // let filterleft = this.leftDataList.reduce((cur, next) => {
            //     obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
            //     return cur;
            // }, [])
            // console.log('filterright', filterleft)
            this.leftData = this.setData(this.leftDataList, this.searchLeft);
            this.rightData = this.setData(this.rightDataList, this.searchRight);
            this.$emit(
                "change",
                this.rightDataList.map((item) => item[this.keyName])
            );
        },

        handleQueryLeft() {
            this.leftData = this.setData(this.leftDataList, this.searchLeft);
        },
        handleQueryRight() {
            this.rightData = this.setData(this.rightDataList, this.searchRight);
        },
        // å•é€‰
        handleLeftRowClick(row) {
            if (this.leftData) {
                this.$refs.transferLeftTable.toggleRowSelection(row)
            } else {
                this.$refs.transferLeftTable.clearSelection()
            }
        },
        // å•é€‰
        handleRightRowClick(row) {
            if (this.rightData) {
                this.$refs.transferRightTable.toggleRowSelection(row)
            } else {
                this.$refs.transferRightTable.clearSelection()
            }
        },
        setData(dataList, search) {
            if (search != null || search != "") {
                let list = [];
                for (let i = 0; i < dataList.length; i++) {
                    if (
                        this.columns.some((item) =>
                            dataList[i][item.key].toLowerCase().includes(search.toLowerCase())
                        )
                    ) {
                        list.push(dataList[i]);
                    }
                }
                return list;
            } else {
                return dataList;
            }
        },
        change(val) {
            console.log(val);
            console.log(this.value)
        },
        done() {
            this.dialogVisible = false
        },
        tableTransferSave() {
            this.$emit('save', this.rightData)
            this.leftData = [...this.rightData, ...this.leftData]
            this.leftDataList = [...this.rightDataList, ...this.leftDataList]
            this.rightDataList = []
            this.rightData = []

        }
    },
}
</script>

<style lang="scss" scoped>
::v-deep(.el-col>.el-card >.el-card__header) {
    background: #fff
}

.box-card {
    background: #fff;
}

.clearfix {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.input {
    float: right;
    padding: 3px 0;
    max-width: 400px;
}

.btns {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;

    .btn {
        margin: 20px 0;
    }
}
</style>

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

@@ -2,31 +2,82 @@
    <div>
        <el-button @click="outerVisible = true">流程测试</el-button>
        <el-button @click="visibleFlow = true">模板流程</el-button>
        <el-button @click="visibleStage = true">模板阶段</el-button>
        <el-button @click="visibleTable = true">table穿梭框</el-button>
        <flow-business :visible.sync="outerVisible"></flow-business>
        <flow-path :visible.sync="visibleFlow" code="A12826E4-2B66-6D56-DE30-92BB1D7F607F"></flow-path>
        <flow-path :visible.sync="visibleFlow" code="8b5e2017-990f-454a-9c39-4c4eeeb57553"></flow-path>
        <stage :visible.sync="visibleStage" code="8b5e2017-990f-454a-9c39-4c4eeeb57553"></stage>
        <table-transfer :visible.sync="visibleTable" v-model="value" :dataList="list" :columns="columns" keyName="id"
            @change="change"></table-transfer>
    </div>
</template>

<script>
import FlowBusiness from '@/components/template/Business'
import FlowPath from '@/components/template/FlowPath'
import Stage from '@/components/template/Stage'
import TableTransfer from '@/components/template/TableTransfer'
export default {
    components:{
        FlowBusiness,
        FlowPath
        FlowPath,
        Stage,
        TableTransfer
    },
    data() {
        const getTables = () => {
            let data = []
            for (let i = 0; i < 5; i++) {
                let item = {
                    id: `${i+1}`,
                    name: 'name',
                    address: '集团码',
                    data:'',
                    checked:false,
                }
                data.push(item)
            }
            return data
        }
        return {
            list: getTables(),
            value: [],
            outerVisible: false,
            visibleFlow: false,
            visibleStage: false,
            visibleTable: false,

            columns: [
                {
                    key: "id",
                    label: "id",
                    visible: false,
                },
                {
                    key: "name",
                    label: "属性编号",
                    visible: true,
                },
                {
                    key: "address",
                    label: "属性名称",
                    visible: true,
                },
                {
                    key: "address",
                    label: "属性分组",
                    visible: true,
                },
            ],
           
        }
    },
    methods: {
        
        change(val) {
            console.log(val);
            console.log(this.value)
        },
    }
}
</script>
<style lang="scss" scoped>

</style>
<style lang="scss" scoped></style>

 Source/UBCS-WEB/vue.config.js

@@ -26,13 +26,9 @@
    proxy: {
      '/api': {
        //本地服务接口地址
        target: 'http://localhost:37000',
        //  target: 'http://localhost:37000',
        // target: 'http://192.168.1.51:37000',
        // target: 'http://192.168.3.7:37000',
        // target: 'http://dev.vci-tech.com:37000',
        // target: 'http://192.168.1.51:37000/',
        // target: 'http://localhost:37000',
        target: 'http://192.168.1.104:37000',
        // target: 'http://192.168.1.63:37000',
        // target: 'http://192.168.3.7:37000',
        // target: 'http://dev.vci-tech.com:37000',