YZProjectCloud/yanzhu-ui-vue3/src/views/trouble/problemmodifyDraft/index.vue

<template>
    <div class="app-container problemmodify-draft">
        <el-form :model="data.queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="检查类型" prop="problemType">
                <el-select v-model="data.queryParams.problemType" placeholder="请选择检查类型" clearable>
                    <el-option v-for="dict in ssp_proble_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="整改人" prop="lordSent">
                <el-input v-model="data.queryParams.userName" style="width: 200px;" placeholder="请输入人员姓名/联系方式" clearable @keyup.enter="handleQuery" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain size="small" @click="handleAdd" v-hasPermi="['trouble:smzSspProblemmodifyDraft:add']">
                    <el-icon>
                        <Plus />
                    </el-icon>新增
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" plain size="small" @click="dataSynchronization" :disabled="single" v-hasPermi="['trouble:smzSspProblemmodifyDraft:add']">
                    <el-icon>
                        <CopyDocument />
                    </el-icon>数据同步
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-tooltip content="批量提交选择的数据！" placement="bottom">
                    <el-button type="success" plain size="small" @click="batchSubmitForm" :disabled="multiple" v-hasPermi="['trouble:smzSspProblemmodifyDraft:add']">
                        <el-icon>
                            <Check />
                        </el-icon>批量提交
                    </el-button>
                </el-tooltip>
            </el-col>
        </el-row>
        <el-alert title="操作说明" class="tips" effect="dark" type="warning" :closable="false">
            <template #title>
                <div>
                    <strong>数据同步:</strong>将选中行的数据同步到（当前项目或项目为空）的其它行！
                </div>
                <div>
                    <strong>批量提交:</strong>将选中行的数据，数据验证通过后一次全部提交！
                </div>
            </template>
        </el-alert>
        <el-form :model="data.form" :rules="data.rules" ref="formRef">
            <el-table :data="data.showList" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="30" align="center" />
                <el-table-column type="index" width="50" align="center" label="序号"></el-table-column>

                <el-table-column align="center" width="180" class-name="td-up-img" label="问题图片">
                    <template #default="scope">
                        <div :class="scope.row.errSmarkUrl ? 'is-err' : ''">
                            <image-upload v-model="scope.row.smarkUrl" previewAll :limit="5" :isShowTip="false" @change="scope.row.errSmarkUrl = scope.row.smarkUrl ? false : true" />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" width="180" class-name="td-proble-type" label="隐患类型">
                    <template #default="scope">
                        <div :class="scope.row.errProblemType ? 'is-err' : ''">
                            <el-select v-model="scope.row.problemType" placeholder="请选择检查类型" clearable @change="scope.row.errProblemType = scope.row.problemType ? false : true">
                                <el-option v-for="dict in ssp_proble_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                            </el-select>
                        </div>
                        <div :class="scope.row.errDangerType ? 'is-err' : ''">
                            <el-select v-model="scope.row.dangerType" placeholder="请选择隐患类型" clearable style="margin-top:80px;" @change="scope.row.errDangerType = scope.row.dangerType ? false : true">
                                <el-option v-for="dict in ssp_proble_sub_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                            </el-select>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="施工部位" align="center" prop="workParts" min-width="240" class-name="td-textarea">
                    <template #default="scope">
                        <div :class="scope.row.errWorkParts ? 'is-err' : ''">
                            <el-input v-model="scope.row.workParts" placeholder="请输入施工部位" type="textarea" :rows="3" @change="scope.row.errWorkParts = scope.row.workParts ? false : true" />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="整改要求" align="center" prop="changeInfo" min-width="240" class-name="td-textarea">
                    <template #default="scope">
                        <div :class="scope.row.errChangeInfo ? 'is-err' : ''">
                            <el-input v-model="scope.row.changeInfo" placeholder="请输入整改要求" type="textarea" :rows="3" @change="scope.row.errChangeInfo = scope.row.changeInfo ? false : true" />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="问题人员" align="center" width="300" class-name="td-select">
                    <template #default="scope">
                        <el-form-item label="整改人">
                            <div :class="scope.row.errLordSent ? 'is-err' : ''" style="width: 100%;">
                                <el-select
                                    v-model="scope.row.lordSent"
                                    placeholder="请选择人员"
                                    clearable
                                    @change="scope.row.errLordSent = scope.row.lordSent ? false : true"
                                    popper-class="select-popper-group-pd"
                                >
                                    <el-option-group v-for="group in data.modUserList" :key="group.label" :label="group.label">
                                        <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value" />
                                    </el-option-group>
                                </el-select>
                            </div>
                        </el-form-item>
                        <el-form-item label="抄送人">
                            <div :class="scope.row.errCopySend ? 'is-err' : ''" style="width: 100%;">
                                <el-select
                                    v-model="scope.row.copySend"
                                    placeholder="请选择人员"
                                    clearable
                                    multiple
                                    collapse-tags
                                    @change="scope.row.errCopySend = scope.row.copySend ? false : true"
                                    popper-class="select-popper-group-pd"
                                    collapse-tags-tooltip
                                >
                                    <el-option-group v-for="group in data.ccUserList" :key="group.label" :label="group.label">
                                        <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value" />
                                    </el-option-group>
                                </el-select>
                            </div>
                        </el-form-item>
                        <el-form-item label="复检人">
                            <div :class="scope.row.errRecheckSend ? 'is-err' : ''" style="width: 100%;">
                                <el-select
                                    v-model="scope.row.recheckSend"
                                    placeholder="请选择人员"
                                    clearable
                                    @change="scope.row.errRecheckSend = scope.row.recheckSend ? false : true"
                                    popper-class="select-popper-group-pd"
                                    collapse-tags-tooltip
                                >
                                    <el-option-group v-for="group in data.recheckUserList" :key="group.label" :label="group.label">
                                        <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value" />
                                    </el-option-group>
                                </el-select>
                            </div>
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column label="整改截至时间" align="center" prop="nickedTime" width="180" class-name="td-select">
                    <template #default="scope">
                        <el-form-item label>
                            <div :class="scope.row.errNickedTime ? 'is-err' : ''" style="width: 100%;">
                                <el-date-picker
                                    v-model="scope.row.nickedTime"
                                    type="date"
                                    placeholder="选择日期"
                                    value-format="YYYY-MM-DD"
                                    @change="scope.row.errNickedTime = scope.row.nickedTime ? false : true"
                                    style="width: 100%"
                                />
                            </div>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template #default="scope">
                        <el-button link type="primary" icon="Edit" @click="submitRow(scope.row)" v-hasPermi="['trouble:problemmodifyDraft:edit']">提交</el-button>
                        <br />
                        <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['trouble:problemmodifyDraft:remove']">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-form>
    </div>
</template>

<script setup name="ProblemmodifyDraft">
import {
    listProblemmodifyDraft,
    getProblemmodifyDraft,
    delProblemmodifyDraft,
    addProblemmodifyDraft,
    updateProblemmodifyDraft,
} from '@/api/trouble/problemmodifyDraft'
import { batchAddProblemmodify } from '@/api/trouble/problemmodify'

import useUserStore from '@/store/modules/user'
import { listProProjectInfoSubdeptsUsers } from '@/api/manage/proProjectInfoSubdeptsUsers'
const userStore = useUserStore()
const { proxy } = getCurrentInstance()
const { ssp_proble_type, ssp_proble_sub_type } = proxy.useDict('ssp_proble_type', 'ssp_proble_sub_type')

const open = ref(false)
const loading = ref(true)
const showSearch = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const title = ref('')
const uploadFileUrl = ref(import.meta.env.VITE_APP_BASE_API + '/file/upload') // 上传文件服务器地址

const data = reactive({
    dataList: [],
    showList: [],
    form: {},
    queryParams: {
        problemType: null,
        userName: null,
    },
    rules: {},
    selData: [],
    users: [],
    modUserList: [], //整改人
    ccUserList: [], //抄送人
    recheckUserList: [], //复检人
})

const { queryParams, form, rules } = toRefs(data)

/** 搜索按钮操作 */
function handleQuery() {
    data.showList = data.dataList.filter((d) => {
        let ck1 = true
        if (data.queryParams.problemType) {
            ck1 = d.problemType == data.queryParams.problemType
        }
        return ck1
    })
}

/** 重置按钮操作 */
function resetQuery() {
    proxy.resetForm('queryRef')
    handleQuery()
}

// 多选框选中数据
function handleSelectionChange(selection) {
    data.selData = selection
    ids.value = selection.map((item) => item.id)
    single.value = selection.length != 1
    multiple.value = !selection.length
}

/** 新增按钮操作 */
function handleAdd() {
    let row = {
        key: +new Date(),
        id: null,
        projectId: userStore.currentPrjId,
        comId: userStore.currentComId,
        problemType: null,
        dangerType: null,
        smarkUrl: null,
        workParts: null,
        changeInfo: null,
        lordSent: null,
        copySend: null,
        recheckSend: null,
        nickedTime: null,
        isDel: 0,
        infoType: 1,
    }
    data.dataList.push(row)
    data.showList.push(row)
}
/** 数据同步 */
function dataSynchronization() {
    let row = data.selData[0]
    data.showList.forEach((it) => {
        if (it != row) {
            it.problemType = row.problemType
            it.dangerType = row.dangerType
            it.smarkUrl = row.smarkUrl
            it.workParts = row.workParts
            it.changeInfo = row.changeInfo
            it.lordSent = row.lordSent
            it.copySend = row.copySend
            it.recheckSend = row.recheckSend
            it.nickedTime = row.nickedTime
        }
    })
}
function submitRow(row) {
    if (checkRow(row)) {
        doBatchAdd([row])
    }
}
function batchSubmitForm() {
    let cnt = 0
    data.selData.forEach((it) => {
        if (!checkRow(it)) {
            cnt++
            //data.showList.splice(it, 1);
            //data.dataList.splice(it, 1);
        }
    })
    if (cnt > 0) {
        return
    }
    doBatchAdd(data.selData)
}
function doBatchAdd(datas) {
    datas.forEach((it) => {
        it.projectId = userStore.currentPrjId
        it.comId = userStore.currentComId
        it.infoType = 0
        let users = data.users.filter((u) => u.userId == it.lordSent)
        it.lordSent = users.map((u) => u.userId).join(',')
        it.lordSentUser = users.map((u) => u.userName).join(',')
        users = data.users.filter((u) => it.copySend.includes(u.userId))
        it.copySend = users.map((u) => u.userId).join(',')
        it.copySendUser = users.map((u) => u.userName).join(',')
        users = data.users.filter((u) => u.userId == it.recheckSend)
        it.recheckSend = users.map((u) => u.userId).join(',')
        it.recheckSendUser = users.map((u) => u.userName).join(',')
    })
    batchAddProblemmodify(datas).then((res) => {
        if (res.code == 200) {
            proxy.$modal.msgSuccess('提交成功！')
            datas.forEach((it) => {
                data.showList.splice(it, 1)
                data.dataList.splice(it, 1)
            })
            if (data.showList.length == 0) {
                let row = {
                    key: +new Date(),
                    id: null,
                    projectId: userStore.currentPrjId,
                    comId: userStore.currentComId,
                    problemType: null,
                    dangerType: null,
                    smarkUrl: null,
                    workParts: null,
                    changeInfo: null,
                    lordSent: null,
                    copySend: null,
                    recheckSend: null,
                    nickedTime: null,
                    isDel: 0,
                    infoType: 1,
                }
                data.dataList.push(row)
                data.showList.push(row)
            }
        }
    })
}
function checkRow(row) {
    row.errSmarkUrl = false
    row.errProblemType = false
    row.errDangerType = false
    row.errWorkParts = false
    row.errChangeInfo = false
    row.errLordSent = false
    row.errCopySend = false
    row.errRecheckSend = false
    row.errNickedTime = false
    let ret = true
    if (!row.smarkUrl) {
        row.errSmarkUrl = true
        ret = false
    }
    if (!row.problemType) {
        row.errProblemType = true
        ret = false
    }
    if (!row.dangerType) {
        row.errDangerType = true
        ret = false
    }
    if (!row.workParts) {
        row.errWorkParts = true
        ret = false
    }
    if (!row.changeInfo) {
        row.errChangeInfo = true
        ret = false
    }
    if (!row.lordSent) {
        row.errLordSent = true
        ret = false
    }
    if (!row.copySend) {
        row.errCopySend = true
        ret = false
    }
    if (!row.recheckSend) {
        row.errRecheckSend = true
        ret = false
    }
    if (!row.nickedTime) {
        row.errNickedTime = true
        ret = false
    }
    return ret
}

/** 提交按钮 */
function submitForm() {
    proxy.$refs['problemmodifyDraftRef'].validate((valid) => {
        if (valid) {
            if (form.value.id != null) {
                updateProblemmodifyDraft(form.value).then((response) => {
                    proxy.$modal.msgSuccess('修改成功')
                    open.value = false
                    getList()
                })
            } else {
                addProblemmodifyDraft(form.value).then((response) => {
                    proxy.$modal.msgSuccess('新增成功')
                    open.value = false
                    getList()
                })
            }
        }
    })
}

/** 删除按钮操作 */
function handleDelete(row) {
    if (data.dataList.length == 1) {
        proxy.$modal.msgError('至少保留一条数据')
        return
    }
    proxy.$modal
        .confirm('是否确认删除数据项？')
        .then(function () {
            data.showList.splice(row, 1)
            data.dataList.splice(row, 1)
            proxy.$modal.msgSuccess('删除成功')
        })
        .catch(() => {})
}

/** 导出按钮操作 */
function handleExport() {
    proxy.download(
        'trouble/problemmodifyDraft/export',
        {
            ...queryParams.value,
        },
        `problemmodifyDraft_${new Date().getTime()}.xlsx`
    )
}
function makeSelectData(users, type) {
    console.log("--->",users,type)
    let objs = {}
    users.forEach((it) => {
        let deptName = it.subDeptName||it.projectName
        if (!objs[deptName]) {
            objs[deptName] = []
        }
        objs[deptName].push(it)
    })
    let arr = []
    for (let k in objs) {
        arr.push({
            label: k,
            options: objs[k].map((it) => {
                let pos = type ? `[${it.userPost == 2 ? '项目经理' : it.userPost == 3 ? '班组长' : it.userPost == 8 ? '安全员' : ''}]` : ''
                return {
                    value: it.userId,
                    label: it.userName + pos,
                    data: it,
                }
            }),
        })
    }
    return arr
}
function getUserTree() {
    let row = {
        key: +new Date(),
        id: null,
        projectId: userStore.currentPrjId,
        comId: userStore.currentComId,
        problemType: null,
        dangerType: null,
        smarkUrl: null,
        workParts: null,
        changeInfo: null,
        lordSent: null,
        copySend: null,
        recheckSend: null,
        nickedTime: null,
        isDel: 0,
        infoType: 1,
    }
    data.dataList.push(row)
    data.showList.push(row)
    listProProjectInfoSubdeptsUsers({ projectId: userStore.currentPrjId, pageNum: 1, pageSize: 1000 }).then((d) => {
        let users = d.rows || []
        data.users = users
        data.modUserList = makeSelectData(
            users
                .filter((it) => it.subDeptType == 4 || it.subDeptType == 5)
                .filter((it) => it.userPost == 2 || it.userPost == 3 || it.userPost == 8),
            true
        )
        data.ccUserList = makeSelectData(users.filter((it) => it.userPost != 4 && it.userPost != 5))
        data.recheckUserList = makeSelectData(users.filter((it) => it.subDeptType == 1))
    })
}
getUserTree()
</script>
<style lang="scss">
.problemmodify-draft {
    .td-up-img {
        .component-upload-image {
            height: 150px;
            overflow: hidden;

            .el-upload-list__item {
                position: absolute;
            }
        }
    }

    .td-textarea {
        .cell {
            width: 100%;
            height: 100%;

            .el-textarea {
                width: 100%;
                height: 150px;

                .el-textarea__inner {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }

    .td-select {
        .el-select {
            width: 100%;
        }

        .is-err {
            &::after {
                bottom: -15px;
            }
        }
    }

    .is-err {
        position: relative;
        padding-bottom: 12px;

        .el-upload--picture-card {
            border-color: red;
        }

        &::after {
            content: '不为空';
            color: red;
            left: 0px;
            font-size: 12px;
            position: absolute;
            bottom: -7px;
        }

        .el-select__wrapper,
        .el-textarea__inner,
        .el-input__wrapper {
            box-shadow: inset 0 0 0 1px red;
        }
    }
}

.select-popper-group-pd {
    .el-select-group {
        .el-select-dropdown__item {
            padding-left: 30px;
        }
    }
}
</style>