archives/src/views/config/parameter.vue

<template>
    <div class="hc-page-layout-box">
        <div class="hc-page-content-box">
            <hc-new-card>
                <template #header>
                    <div class="hc-card-header-table-title">参数设置</div>
                </template>
                <template #extra>
                    <HcTooltip keys="file_collection_btn_upload_scanned_files">
                        <el-button type="primary" hc-btn @click="uploadModalClick">
                            <HcIcon name="save" />
                            <span>保存</span>
                        </el-button>
                    </HcTooltip>
                </template>
                <el-scrollbar>
                    <div class="hc-page-content-box-list">
                        <div class="hc-page-content-box-list-title">归档目录树选择范围</div>
                        <el-alert title="选择对应的归档范围，目录树内容也会随之改变" type="error" :closable="false" />
                        <div class="hc-card-header-tree-checkbox">
                            <el-checkbox-group v-model="projectTypeList">
                                <el-checkbox :label="1">公路工程</el-checkbox>
                                <el-checkbox :label="2">水利水电工程</el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </div>
                    <div class="hc-page-content-box-list">
                        <div class="hc-page-content-box-list-title">案卷四要素设置</div>
                        <el-alert title="勾选是否要生成封面、脊背、卷内目录、备考表" type="error" :closable="false" />
                        <div class="hc-card-header-tree-checkbox">
                            <el-checkbox-group v-model="factorTypeList">
                                <el-checkbox label="1">案卷封面</el-checkbox>
                                <el-checkbox label="2">卷内目录</el-checkbox>
                                <el-checkbox label="3">脊背</el-checkbox>
                                <el-checkbox label="4">备考表</el-checkbox>
                                <el-checkbox label="5">生成页码</el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </div>
                    <div class="hc-page-content-box-list">
                        <div class="hc-page-content-box-list-title">组卷流水号设置</div>
                        <el-alert title="配置流水号生成的规则，是否设置有虚号及位数" type="error" :closable="false" />
                        <div class="hc-card-header-tree-checkbox">
                            <el-radio-group v-model="dirType">
                                <el-radio :label="1">按档案主目录类别生成后缀流水号</el-radio>
                                <el-radio :label="0">按档案目录从上至下的顺序生成流水号</el-radio>
                            </el-radio-group>
                            <div class="mt-4">
                                <el-radio-group v-model="indexType">
                                    <el-radio :label="1">有虚号</el-radio>
                                    <el-radio :label="0">无虚号</el-radio>
                                </el-radio-group>
                            </div>
                            <div class="mt-4">
                                <el-input-number v-model="indexNum" :min="0" :max="10" />
                            </div>
                        </div>
                    </div>
                </el-scrollbar>
            </hc-new-card>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { useAppStore } from '~src/store'
import archiveConfigApi from '~api/archiveConfig/archiveConfig.js'

//变量
const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId)
const contractId = ref(useAppState.getContractId)
const projectInfo = ref(useAppState.getProjectInfo)
const isCollapse = ref(useAppState.getCollapse)

const projectTypeList = ref([])
const factorTypeList = ref([])
const config = ref({})
//组卷流水号设置
const dirType = ref(0)//目录类型
const indexType = ref(0)//流水号类型
const indexNum = ref(0)//虚位数
//监听
watch(() => [
    useAppState.getCollapse,
], ([Collapse]) => {
    isCollapse.value = Collapse
})

//渲染完成
onMounted(() => {
    getConfigByProjectId()
})

//搜索表单
const searchForm = ref({
    contractId: null, type: null, approval: null, betweenTime: null,
    current: 1, size: 20, total: 0,
})


const getConfigByProjectId = async () => {
    const { code, res } = await archiveConfigApi.getConfigByProjectId({
        projectId: projectId.value,
    })
    //console.log(res);
    if (code == 200) {
        // 如果projectType 为 1 则选中 公路工程，为 2，则选中水里水电工程，为3，则两个都选中
        // factorType信息为字符串，格式为"1,2,3,4",包含 1，则选中案卷封面，包含2则选中卷内目录，包含3则选中脊背，包含4则选中备考表
        config.value = res.data
        dirType.value = res.data['dirType'] || 0//目录类型
        indexType.value = res.data['indexType'] || 0//流水号类型
        indexNum.value = res.data['indexNum'] || 0//虚位树
        if (config.value.projectType == 1 || config.value.projectType == 2) {
            projectTypeList.value = [config.value.projectType]
        } else if (config.value.projectType == 3) {
            projectTypeList.value = [1, 2]
        } else if (config.value.projectType == 0) {
            projectTypeList.value = []
        }

        factorTypeList.value = config.value.factorType.split(',')
    }
}

const uploadModalClick = async () => {
    let factorType = ''
    let projectType = 0
    if (projectTypeList.value.length == 1) {
        projectType = projectTypeList.value[0]
    } else if (projectTypeList.value.length > 1) {
        projectType = 3
    }

    factorType = factorTypeList.value.join(',')

    const { code, res } = await archiveConfigApi.updateConfig({
        id: config.value.id,
        projectId: projectId.value,
        factorType: factorType,
        projectType: projectType,
        dirType: dirType.value,
        indexType: indexType.value,
        indexNum: indexNum.value,

    })

    if (code == 200) {
        window.$message?.success('修改成功')
    }
}

//左右拖动，改变树形结构宽度
const leftWidth = ref(382)
const onmousedown = () => {
    const leftNum = isCollapse.value ? 142 : 272
    document.onmousemove = (ve) => {
        let diffVal = ve.clientX - leftNum
        if (diffVal >= 310 && diffVal <= 900) {
            leftWidth.value = diffVal
        }
    }
    document.onmouseup = () => {
        document.onmousemove = null
        document.onmouseup = null
    }
}
//保存
const saveClick = () => {
    console.log('保存')
}
</script>

<style lang="scss" scoped>
@import '~style/custody/scoped/backup.scss';
.hc-card-header-table-title {
    font-size: 1.125rem;
    line-height: 1.75rem;
}
.hc-card-header-tree-checkbox {
    margin-top: 30px;
    text-align: center;
}
.hc-page-content-box-list {
    width: 100%;
    height: 300px;
    border: rgb(187, 187, 187) solid 1px;
    margin-bottom: 30px;
    .hc-page-content-box-list-title {
        margin-top: 30px;
        padding-left: 30px;
        margin-bottom: 30px;
        font-size: 20px;
        color: rgba(52, 54, 57, 0.5);
    }
}
</style>