SixUnificationCDC-UI/src/views/unified-resources/data-directory/comp/SelectDutyDialog.vue

<template>
    <el-dialog :modal="true" :close-on-click-modal="false" :close-on-press-escape="false" title="选择数据目录"
        :append-to-body="true" :visible.sync="visible" width="50%" :before-close="handleClose">
        <el-form :inline="true" label-width="auto" :model="searchForm" class="form-detail-inline-two">
            <el-form-item label="数据目录名称">
                <el-input placeholder="请输入数据目录名称" v-model="searchForm.searchName" />
            </el-form-item>
            <el-form-item class="no-label">
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table ref="tableRef" :data="tableData" max-height="500" @select="selectionChange" row-key="id"
            class="table-new--dialog">
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column prop="belongDepartmentName" label="内设机构名称" align="center" />
            <el-table-column prop="agenciesPrsponsibility" label="内设机构职责" align="center" />
        </el-table>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="saveHandle">确定</el-button>
            <el-button @click="handleClose">取消</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { getResponsibilityList, } from '@/api/unified-resources/job-directory/index.js'

export default {
    props: {
        value: {
            type: Boolean,
            default: false,
        },
        operationType: {
            type: String,
            default: ''
        },
        // selectDutyId: {
        //     type: String,
        //     default: ''
        // }
    },
    data() {
        return {
            visible: this.value,
            searchForm: { searchName: '' },
            selectArr: [],
            tableData: [],
            selectObj: {},
            currentPage: 1,
            pageSize: 10,
            tableRef: null
        };
    },
    computed: {
        ...mapState('projectManage', ['selectDutyId']),  // 映射 Vuex 状态
    },
    watch: {
        value(newVal) {
            this.visible = newVal;
        },
        visible(newVal) {
            this.$emit("input", newVal);
        },
        selectDutyId(newVal) {
            if (newVal) {
                this.tableData.forEach(element => {
                    if (element.id === newVal) {
                        this.$nextTick(() => {
                            this.$refs.tableRef.toggleRowSelection(element, true);  // 自动选择行
                        });
                    }
                });
            }
        }
    },
    mounted() {
        this.getList();  // 获取数据
    },
    methods: {
        // ...mapActions('projectManage', ['setsSelectDutyId']),  // 映射 Vuex actions

        getList() {
            getResponsibilityList({
                pageNumber: this.currentPage,
                pageSize: this.pageSize,
                agenciesName: this.searchForm.searchName
            }).then(res => {
                if (+res.code === 200) {
                    this.tableData = res.data;
                    if (this.selectDutyId) {
                        this.tableData.forEach(element => {
                            if (element.id === this.selectDutyId) {
                                this.$nextTick(() => {
                                    this.$refs.tableRef.toggleRowSelection(element, true);
                                });
                            }
                        });
                    }
                }
            });
        },

        handleSearch() {
            this.currentPage = 1;
            this.pageSize = 10;
            this.getList();
        },

        reset() {
            this.searchForm.searchName = '';
            this.currentPage = 1;
            this.pageSize = 10;
            this.getList();
        },

        selectionChange(selection, row) {
            this.$refs.tableRef.clearSelection();
            if (this.selectArr.length === 0) {
                this.$refs.tableRef.toggleRowSelection(row, true);
            } else {
                if (this.selectArr[0].id === row.id) {
                    this.$refs.tableRef.toggleRowSelection(row, false);
                } else {
                    this.$refs.tableRef.toggleRowSelection(row, true);
                }
            }

            this.selectArr = this.$refs.tableRef.selection;
            this.selectObj = row;
        },

        saveHandle() {
            debugger
            this.$store.dispatch('projectManage/setsSelectDutyId', this.selectObj.id)
            // this.setsSelectDutyId(this.selectObj.id);  // 更新 Vuex 状态
            this.$emit('saveHandle', this.selectObj);  // 向父组件发送选择的对象
            this.handleClose();
        },

        handleClose() {
            this.visible = false;
            this.$emit("cancel");
        }
    }
};
</script>

<style scoped lang="scss">
.op-btn {
    margin-top: 30px;
    text-align: center;
}

.el-row {
    margin-top: 10px;
}

.el-select {
    width: 100%;
}

.el-divider--horizontal {
    margin: 13px 0;
}

.custom-tree-node {
    width: 200px;
}
</style>