epmet-work-pc-chengyang/src/views/modules/shequzhili/event/cpts/process-form-replay-end.vue

<!--
 * @Author: yanLu xgktv007@163.com
 * @Date: 2023-09-05 10:21:34
 * @LastEditors: yanLu xgktv007@163.com
 * @LastEditTime: 2023-09-05 10:21:34
 * @Description: 事件回复
 * 
 * 
-->
<template>
    <div class="search">
        <el-form ref="ref_form2" :inline="false" :model="formData" :rules="dataRule">
            <el-form-item label="事件分类" label-width="150px" :class="{ 'form-item': source === 'visiual' }"
                prop="categoryList">
                <div :class="{ 'visiual-form': source === 'visiual' }">
                    <el-cascader class="cell-width-2" ref="myCascader" v-model="selCategoryArray" :key="iscascaderShow"
                        :options="casOptions" :props="optionProps" :show-all-levels="false"
                        @change="handleChangeCate"></el-cascader>
                </div>
            </el-form-item>
            <el-form-item label="回复内容" prop="content" label-width="150px" :class="{ 'form-item': source === 'visiual' }"
                style="display: block">
                <div :class="{ 'visiual-form': source === 'visiual' }">
                    <el-input class="cell-width-area" type="textarea" maxlength="500" show-word-limit :rows="5"
                        placeholder="请输入回复内容，不超过500字" v-model="formData.content"></el-input>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { Loading } from "element-ui"; // 引入Loading服务
import { requestPost } from "@/js/dai/request";
let loading; // 加载动画

export default {
    data() {
        return {
            btnDisable: false,
            formData: {
                operationType: '6', //处理方式[0:已回复 5、指派  6、完成并回复]
                content: '',
                status: 'closed_case',
                categoryList: [],
            },
            status: false,
            okflag: false,
            eventDetailCopy: {},
            selCategoryArray: [],
            casOptions: [],
            iscascaderShow: 0,
            optionProps: {
                multiple: false,
                value: 'id',
                label: 'name',
                children: 'subCategory',
            },
            dataRule: {
                content: [
                    { required: true, message: '回复内容不能为空', trigger: 'blur' },
                ],
                categoryList: [
                    //   { required: true, message: '事件分类不能为空', trigger: 'blur' },
                ]
            }
        };
    },
    components: {},
    computed: {},
    props: {
        eventId: {
            type: String,
            default: '',
        },
        eventDetailData: {
            type: Object,
            default() {
                return {};
            },
        },
        source: {
            //展示来源：manage  管理平台    visiual  可视化平台
            type: String,
            default: 'manage',
        },
    },
    watch: {},

    created() {},

    async mounted() {
        this.getCategoryList();
        if (this.eventId) {
            this.eventDetailCopy = JSON.parse(JSON.stringify(this.eventDetailData));
            // 这一步接收到eventDetailCopy在这里回填
            if (this.eventDetailCopy.parentCategoryId && this.eventDetailCopy.categoryId) {
                this.formData.categoryId = this.eventDetailCopy.categoryId
                this.selCategoryArray.push(this.eventDetailCopy.parentCategoryId, this.eventDetailCopy.categoryId)
            }
        }
    },

    methods: {
        async getCategoryList() {
            const url = '/governance/issueprojectcategorydict/list';
            let params = {};
            const { data, code, msg } = await requestPost(url, params);
            if (code === 0) {
                let treeDataNew = this.filterTree(data);
                //组织级联数据
                ++this.iscascaderShow;
                this.casOptions = [];
                this.casOptions = treeDataNew;
            } else {
                this.$message.error(msg);
            }
        },
        handleChangeCate() {
            if (this.selCateObj = this.$refs['myCascader'].getCheckedNodes()[0]) {
                this.selCateObj = this.$refs['myCascader'].getCheckedNodes()[0].data
            } else {
                this.selCateObj = {}
            }
        },
        //重构树，去除网格
        filterTree(arr) {
            let childs = arr;
            for (let i = childs.length; i--; i > 0) {
                if (childs[i].subCategory) {
                    if (childs[i].subCategory.length) {
                        this.filterTree(childs[i].subCategory);
                    } else {
                        delete childs[i].subCategory;
                    }
                }
            }
            return arr;
        },
        async getReplayInfo() {
            this.okflag = false;
            this.$refs['ref_form2'].validate((valid, messageObj) => {
                if (!valid) {
                    app.util.validateRule(messageObj);
                } else {
                    if (this.status) {
                        if (!this.selCateObj || !this.selCateObj.id) {
                            this.$message.error('请选择事件分类');
                            return false;
                        }
                    }
                    if (!this.formData.categoryId) {
                        this.formData.categoryId = this.selCateObj.id;
                    }
                    this.formData.categoryList = [];
                    this.formData.categoryList.push(this.selCateObj);
                    this.okflag = true;
                }
            });
        },
        resetData() { },
        // 开启加载动画
        startLoading() {
            loading = Loading.service({
                lock: true, // 是否锁定
                text: '正在加载……', // 加载中需要显示的文字
                background: 'rgba(0,0,0,.7)', // 背景颜色
            });
        },
        // 结束加载动画
        endLoading() {
            // clearTimeout(timer);
            if (loading) {
                loading.close();
            }
        },
    },
};
</script>

<style lang='scss' scoped>
@import '@/assets/scss/modules/visual/a_customize.scss';
@import '@/assets/scss/modules/shequzhili/event-info.scss';

.el-dialog__body {
    padding: 0 10px 20px !important;
}
</style>