archives/src/views/archives/rolling/bookmark.vue

<template>
    <hc-body :loading="treeLoading" :project-nmae="projectInfo?.name" class="hc-archives-bookmark-page" split>
        <template #tree>
            <HcTree
                :auto-expand-keys="treeAutoExpandKeys" :contract-id="contractId" :project-id="projectId"
                @node-loading="treeNodeLoading" @node-tap="nodeElTreeClick"
            />
        </template>
        <hc-new-card title="当前目录信息编辑">
            <template #extra>
                <HcTooltip keys="archives_bookmark_btn_add">
                    <el-button hc-btn type="primary" @click="addModalClick(false)">保存设置</el-button>
                </HcTooltip>
            </template>
            <template #search>
                <el-alert :closable="false" title="提示：设置基础信息，系统可统一内置到组卷信息里面去" type="error" />
            </template>
            <el-form :model="formInline" label-position="top" size="large">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="档号前缀">
                            <el-input v-model="formInline.value.fileNumberPrefix" placeholder="请输入" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="保管期限">
                            <el-select v-model="formInline.value.storageTime" clearable placeholder="请选择" style="width:100%">
                                <el-option v-for="item in retentionPeriod" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="目录名称">
                            <el-input v-model="formInline.value.title" placeholder="请输入" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="立卷人">
                            <el-input v-model="formInline.value.rollor" placeholder="请输入" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="卷盒规格">
                            <el-select v-model="formInline.value.specification" clearable placeholder="请选择" style="width:100%">
                                <el-option v-for="item in coilsize" :key="item.value" :label="item.label" :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="审核人">
                            <el-input v-model="formInline.value.reviewer" placeholder="请输入" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="案卷后缀">
                            <el-input v-model="formInline.value.archiveNameSuffix" placeholder="请输入" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="并卷规则">
                            <el-select
                                v-model="formInline.value.archiveAutoType" 
                                placeholder="请选择"
                                style="width:400px;"
                            >
                                <el-option
                                    v-for="item in ruleTypeList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </hc-new-card>

        <!-- 新增子目录文件夹 -->
        <hc-new-dialog v-model="showaddModal" :title="`${showaddModaltype}子目录文件夹`" widths="50rem" @close="cancelClick" @save="confirmClick">
            <el-form :model="addform" label-width="150px" style="flex-wrap: nowrap;">
                <el-form-item label="文件目录名称：">
                    <div class="el-form-item__content">
                        <el-input v-model="addform.title" />
                        <!-- <i class="ri-add-circle-line mleft" @click="addinputItem"></i>
                      <i class="ri-delete-bin-line mleft"  @click="delinputItem(index,item)"></i> -->
                    </div>
                </el-form-item>
                <el-form-item v-for="(item, index) in addArray" :key="index" label="文件目录名称：">
                    <div v-if="addArray.length > 0" class="el-form-item__content">
                        <el-input v-model="item.title" />
                        <i class="ri-add-circle-line mleft" @click="addinputItem" />
                        <i class="ri-delete-bin-line mleft" @click="delinputItem(index, item)" />
                    </div>
                </el-form-item>
            </el-form>
        </hc-new-dialog>
    </hc-body>
</template>

<script setup>
import { onMounted, reactive, ref, watch } from 'vue'
import { useAppStore } from '~src/store'
import { archiveTreeUpdate } from '~api/other'
import { getStoreValue, setStoreValue } from '~src/utils/storage'
import HcTree from '~src/components/tree/hc-tree.vue'
import tasksApi from '~api/tasks/data'
import { getArrValue } from 'js-fast-way'

//变量
const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId)
const contractId = ref(useAppState.getContractId)
const projectInfo = ref(useAppState.getProjectInfo)
const isCollapse = ref(useAppState.getCollapse)
const showaddModal = ref(false)
const showaddModaltype = ref('新增')
let addform = reactive({ title: '' })
const addArray = reactive([])

//监听
watch(() => [
    useAppState.getCollapse,
], ([Collapse]) => {
    isCollapse.value = Collapse
})

//渲染完成
onMounted(() => {
    setElTreeMenu(1)
    getStoragePeriod()
})

//树加载
const treeLoading = ref(true)
const treeNodeLoading = () => {
    treeLoading.value = false
}

let formInline = reactive({
    value: {
        title: '',
    },
})
//保管期限
const retentionPeriod = ref([
    { label: '永久', value: '1' },
    { label: '30年', value: '2' },
    { label: '10年', value: '3' },
])

//获取保管期限

const getStoragePeriod = async () => {
    const { error, code, data } = await tasksApi.queryTaskTypeStatus({
        typeOrStatus: 'storage_period',
    })
    //处理数据
    if (!error && code === 200) {
        retentionPeriod.value = getArrValue(data)
    } else {
        retentionPeriod.value = []
    }
}
const coilsize = ref([
    { label: '30mm', value: '30' },
    { label: '40mm', value: '40' },
    { label: '50mm', value: '50' },
])
const ruleTypeList = ref([
{
        label: '单独组卷',
        value: 1,
      }, {
        label: '分类并卷',
        value: 2,
      },
      {
        label: '最高组卷',
        value: 3,
      },
])
const onSubmit = () => {
    console.log('submit!')
}//新增

const addModalClick = async (type) => {
    if (!formInline.value.id) {
        window.$message?.warning('请先点选左侧要修改信息的树节点')
        return
    }
    const { code } = await archiveTreeUpdate(formInline.value)
    //console.log(res);
    if (code == 200) {
        window.$message?.success('修改成功')
        window?.location?.reload() //刷新页面
    }

}
const addinputItem = () => {
    addArray.push({ title: '' })
}

const delinputItem = (item, index) => {
    addArray.splice(index, 1)
}
//确认

const confirmClick = () => {
    showaddModal.value = false
}
const cancelClick = () => {
    showaddModal.value = false
}
//删除
const delModalClick = () => {

}
//树相关的变量
const primaryKeyId = ref('')
//子节点树
const nodeItemInfo = ref({})

//自动展开缓存
const treeAutoExpandKeys = ref(getStoreValue('bookExpandKeys') || [])
//项目树被点击
const nodeElTreeClick = ({ node, data, keys, key }) => {
    console.log('点击', data)
    // treeNodeInfo.value = node
    formInline.value = data

    setStoreValue('bookExpandKeys', keys)
    treeAutoExpandKeys.value = keys || []
}
//设置树菜单数据
const ElTreeMenu = ref([])
const TreeMark = ref(false)
const setElTreeMenu = (contractType) => {
    let newArr = []
    newArr = [

        { icon: 'add-circle', label: '新增', key: 'add' },
        { icon: 'draft', label: '编辑', key: 'edit' },
        { icon: 'delete-bin', label: '删除', key: 'del' },
    ]
    ElTreeMenu.value = newArr

}
//树菜单被点击
const ElTreeMenuClick = async ({ key, node, data }) => {
    // nodeItemInfo.value = node
    // nodeDataInfo.value = data
    setTreeMenuDataClick({ key, node, data })
    setStoreValue('bookExpandKeys', keys)
    treeAutoExpandKeys.value = keys || []
}
//处理菜单被点击数据
const setTreeMenuDataClick = ({ key, node, data }) => {
    if (key === 'add') {
        addArray.length = 0
        addform = { title: '' }
        showaddModal.value = true
    } else if (key === 'del') {

    } else {
        addform = data
        showaddModaltype.value = '编辑'
        showaddModal.value = true
    }
}
</script>

<style lang="scss">
@import '~style/archives/bookmark.scss';
</style>