supervision-vue/src/components/data/distrbute.vue

<template>
    <el-dialog title="问题分发" v-model="show" width="80vw" top="5vh">
        <header>
            <div class="flex v-center end mb-20">
                <span class="mr-20"
                    >共
                    <span class="text-primary">{{ data.length }}</span>
                    条数据</span
                >
            </div>
        </header>
        <div style="min-height: 500px">
            <div class="table-container">
                <el-table :data="data">
                    <el-table-column
                        label="案件编号"
                        prop="originId"
                        show-overflow-tooltip
                    />
                    <el-table-column
                        label="受理时间"
                        prop="discoveryTime"
                        show-overflow-tooltip
                    />
                    <el-table-column
                        label="问题发生时间"
                        prop="happenTime"
                        show-overflow-tooltip
                    />
                    <el-table-column
                        label="问题来源"
                        prop="problemSources"
                        show-overflow-tooltip
                    />
                    <el-table-column
                        label="投诉人"
                        prop="responderName"
                        width="90"
                    />
                    <el-table-column
                        label="投诉人电话"
                        prop="contactPhone"
                        width="120"
                    />
                    <el-table-column label="业务类别" prop="businessTypeName" />
                    <el-table-column label="涉嫌问题" prop="involveProblem" />
                    <el-table-column label="涉及警种" prop="policeTypeName" />
                    <el-table-column
                        label="涉及单位"
                        prop="involveDepartName"
                    />
                    <el-table-column
                        label="具体内容"
                        prop="thingDesc"
                        show-overflow-tooltip
                    />
                    
                    <el-table-column label="操作" width="140">
                        <template #default="{ row }">
                            <el-button
                                type="info"
                                link
                                @click="handleRemoveDistribute(row)"
                                >移除</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <footer class="flex end mt-20">
            <el-button
                type="primary"
                size="large"
                @click="handleShowDistributeDialog"
                :disabled="data.length === 0"
                >确认数据</el-button
            >
        </footer>
    </el-dialog>

    <el-dialog title="任务分发" v-model="distributeShow" width="50vw" top="5vh">
        <el-form :label-width="120" ref="formRef" :model="form" v-loading="loading">
            <el-form-item
                label="办理时限"
                prop="timeLimit"
                :rules="{
                    required: true,
                    message: '请选择办理时限',
                }"
            >
                <time-limit-select
                    v-model="form.timeLimit"
                    v-model:maxSignDuration="form.maxSignDuration"
                    v-model:maxHandleDuration="form.maxHandleDuration"
                    v-model:maxExtensionDuration="form.maxExtensionDuration"
                />
            </el-form-item>
            <el-form-item
                label="审核流程"
                prop="approvalFlow"
                :rules="{
                    required: true,
                    message: '请选择审核流程',
                }"
            >
                <el-radio-group v-model="form.approvalFlow">
                    <el-radio
                        v-for="item in dict.approvalFlow"
                        :key="item.dictCode"
                        :value="item.dictValue"
                        >{{ item.dictLabel
                        }}{{ item.remark ? `(${item.remark})` : "" }}</el-radio
                    >
                </el-radio-group>
                <div class="tips mt-10">
                    <p>
                        三级审核　在问题提交办结时，需经过“所队—>二级机构—>市局”三级审核，通过后方可办结；
                    </p>
                    <p>
                        二级审核　在问题提交办结时，仅需经过“所队—>二级机构”两级审核，通过后即可办结；
                    </p>
                </div>
            </el-form-item>
        </el-form>
        <footer class="flex end mt-20">
            <el-button type="primary" size="large" @click="handleSubmit" v-loading="loading"
                >确认下发</el-button
            >
        </footer>
    </el-dialog>
</template>
<script setup>
import useCatchStore from "@/stores/modules/catch";
import { distributePetitionComplaint } from "@/api/data/petitionComplaint";

const catchStore = useCatchStore();
const dict = catchStore.getDicts(["timeLimit", "approvalFlow"]);

const props = defineProps({
    show: {
        type: Boolean,
        default: false,
    },
    data: {
        type: Array,
        default: [],
    },
});

const emit = defineEmits(["update:data", "update:show", "update"]);
const show = ref(props.show);
const distributeShow = ref(false);
watch(
    () => props.show,
    (val) => {
        show.value = val;
    }
);
watch(show, (val) => {
    emit("update:show", val);
});

function handleRemoveDistribute(row) {
    let data = [...props.data];
    data.splice(props.data.indexOf(row), 1);
    emit("update:data", data);
}

const form = ref({});
const formRef = ref();
function handleShowDistributeDialog() {
    distributeShow.value = true;
}

const loading = ref(false)
async function handleSubmit() {
    await formRef.value.validate();
    loading.value = true
    form.value.data = props.data;
    await distributePetitionComplaint(form.value);
    loading.value = false
    form.value = {};
    distributeShow.value = false;
    show.value = false;
    emit("update");
    emit("update:data", []);
}
</script>
<style lang="scss" scoped>
</style>