影像分类设置

src/api/modules/desk/image.js

@@ -1,56 +1,56 @@
-import { HcApi } from '../../request/index'
+import { HcApi } from "../../request/index";
 
 export default {
     async page(form) {
         return HcApi({
-            url: '/api/blade-manager/imageClassificationConfig/list',
-            method: 'get',
+            url: "/api/blade-manager/imageClassificationConfig/list",
+            method: "get",
             params: form,
-        })
+        });
     },
     async detail(id) {
         return HcApi({
-            url: '/api/blade-manager/wbsInfo/detail',
-            method: 'get',
+            url: "/api/blade-manager/wbsInfo/detail",
+            method: "get",
             params: { id },
-        })
+        });
     },
     async submit(form) {
         return HcApi({
-            url: '/api/blade-manager/wbsInfo/submit',
-            method: 'post',
+            url: "/api/blade-manager/imageClassificationConfig/submit",
+            method: "post",
             data: form,
-        })
+        });
     },
     async del(ids) {
         return HcApi({
-            url: '/api/blade-manager/wbsInfo/remove',
-            method: 'post',
+            url: "/api/blade-manager/imageClassificationConfig/remove",
+            method: "post",
             params: { ids },
-        })
+        });
     },
     //元素库树
     async tabTypeLazyTreeAll(form) {
         return HcApi({
-            url: '/api/blade-manager/wbsPrivate/tab-Type-lazy-tree-all',
-            method: 'get',
+            url: "/api/blade-manager/wbsPrivate/tab-Type-lazy-tree-all",
+            method: "get",
             params: form,
-        })
+        });
     },
     //元素库、独立库节点排序
     async wbsInfotabSort(primaryKeyIds) {
         return HcApi({
-            url: '/api/blade-manager/wbsInfo/tab-sort',
-            method: 'post',
+            url: "/api/blade-manager/wbsInfo/tab-sort",
+            method: "post",
             params: { primaryKeyIds },
-        })
+        });
     },
     //获取1质检 2实验公有树列表
     async getWbsList(type) {
         return HcApi({
-            url: '/api/blade-manager/wbsInfo/get-wbs-type',
-            method: 'get',
+            url: "/api/blade-manager/wbsInfo/get-wbs-type",
+            method: "get",
             params: { type },
-        })
+        });
     },
-}
+};

src/views/desk/archive.vue

@@ -1,10 +1,58 @@
 <template>
+    <div style="height: 100%">
+        <hc-page-split :options="splitOptions">
+            <template #left>
+                <hc-card>
+                    <div style="height: 100%">
+                        <hc-tab-card
+                            :tabs="tabsData"
+                            :tab-key="tabsKey"
+                            @change="tabsChange"
+                        >
+                            <div
+                                style="
+                                    display: flex;
+                                    flex-direction: column;
+                                    background: white;
+                                    height: 100%;
+                                "
+                            >
+                                <div style="flex-shrink: 0">其它内容</div>
+                                <div
+                                    style="
+                                        position: relative;
+                                        flex: 1;
+                                        flex-basis: auto;
+                                    "
+                                >
+                                    <hc-body scrollbar>
+                                        <div v-for="item in 50">{{ item }}</div>
+                                    </hc-body>
+                                </div>
+                            </div>
+                        </hc-tab-card>
+                    </div>
+                </hc-card>
+            </template>
+            <hc-card> 其它内容 </hc-card>
+        </hc-page-split>
+    </div>
 </template>
 
 <script setup>
+import { onMounted, ref } from "vue";
+onMounted(() => {});
+//页面分割
+const splitOptions = { sizes: [50, 50], snapOffset: 0, minSize: [300, 300] };
 
+const tabsKey = ref("1");
+const tabsData = ref([
+    { key: "1", name: "竣工档案目录" },
+    { key: "2", name: "文书档案目录" },
+]);
+const tabsChange = (item) => {
+    console.log(item);
+};
 </script>
 
-<style scoped lang="scss">
-
-</style>
+<style scoped lang="scss"></style>

src/views/desk/image.vue

@@ -2,36 +2,73 @@
     <hc-card>
         <template #header>
             <div class="w-120px">
-                <el-select v-model="formModel.affiliatedParty" placeholder="选择所属方" filterable clearable block>
-                    <el-option v-for="item in affiliatedPartyData" :key="item.value" :label="item.label" :value="item.value" />
+                <el-select
+                    v-model="searchForm.affiliatedParty"
+                    placeholder="选择所属方"
+                    filterable
+                    clearable
+                    block
+                >
+                    <el-option
+                        v-for="item in affiliatedPartyData"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                    />
                 </el-select>
             </div>
             <div class="ml-12px w-400px">
-                <hc-search-input v-model="searchForm.classfName" @search="searchClick" />
+                <el-button hc-btn type="primary" @click="searchClick"
+                    >搜索</el-button
+                >
             </div>
         </template>
         <template #extra>
-            <el-button hc-btn type="primary" @click="addRowClick">新增</el-button>
-            <el-button hc-btn type="danger" :disabled="tableCheckKeys.length <= 0" @click="batchDelClick">删除</el-button>
+            <el-button hc-btn type="primary" @click="addRowClick"
+                >新增</el-button
+            >
+            <el-button
+                hc-btn
+                type="danger"
+                :disabled="tableCheckKeys.length <= 0"
+                @click="batchDelClick"
+                >删除</el-button
+            >
         </template>
         <hc-table
-            :column="tableColumn" :datas="tableData" :loading="tableLoading" :index-style="{ width: 60 }"
-            is-check :check-style="{ width: 29 }" @selection-change="tableCheckChange"
+            :column="tableColumn"
+            :datas="tableData"
+            :loading="tableLoading"
+            :index-style="{ width: 60 }"
+            is-check
+            :check-style="{ width: 29 }"
+            @selection-change="tableCheckChange"
         >
             <template #projectStage="{ row }">
-                <span>{{ getDictionaryName(projectStageData, row.projectStage) }}</span>
+                <span>{{
+                    getDictionaryName(projectStageData, row.projectStage)
+                }}</span>
             </template>
             <template #affiliatedParty="{ row }">
-                <span>{{ getDictionaryName(affiliatedPartyData, row.affiliatedParty) }}</span>
+                <span>{{
+                    getDictionaryName(affiliatedPartyData, row.affiliatedParty)
+                }}</span>
             </template>
             <template #fileType="{ row }">
                 <span>{{ getDictionaryName(fileTypeData, row.fileType) }}</span>
             </template>
             <template #storageDirectoryFormat="{ row }">
-                <span>{{ getDictionaryName(storageFormatData, row.storageDirectoryFormat) }}</span>
+                <span>{{
+                    getDictionaryName(
+                        storageFormatData,
+                        row.storageDirectoryFormat
+                    )
+                }}</span>
             </template>
             <template #action="{ row }">
-                <el-link type="warning" @click="edutRowClick(row)">修改</el-link>
+                <el-link type="warning" @click="edutRowClick(row)"
+                    >修改</el-link
+                >
                 <el-link type="danger" @click="rowDelClick(row)">删除</el-link>
             </template>
         </hc-table>
@@ -40,174 +77,281 @@
         </template>
 
         <!-- 新增/修改 -->
-        <hc-dialog v-model="isDataInfoShow" widths="400px" is-footer-center :title="isNullES(formModel.id) ? '新增' : '修改'" @close="dialogClose">
-            <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="top" label-width="auto" size="large">
-                <el-form-item label="WBS名称：" prop="wbsName">
-                    <el-input v-model="formModel.wbsName" clearable placeholder="请输入WBS名称" />
+        <hc-dialog
+            v-model="isDataInfoShow"
+            widths="400px"
+            is-footer-center
+            :title="isNullES(formModel.id) ? '新增' : '修改'"
+            @close="dialogClose"
+        >
+            <el-form
+                ref="formRef"
+                :model="formModel"
+                :rules="formRules"
+                label-position="top"
+                label-width="auto"
+                size="large"
+            >
+                <el-form-item label="分类名称：" prop="classfName">
+                    <el-input
+                        v-model="formModel.classfName"
+                        clearable
+                        placeholder="请输入分类名称"
+                    />
+                </el-form-item>
+                <el-form-item label="所属项目阶段：" prop="projectStage">
+                    <el-select
+                        v-model="formModel.projectStage"
+                        placeholder="选择项目阶段"
+                        filterable
+                        clearable
+                        block
+                    >
+                        <el-option
+                            v-for="item in projectStageData"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="所属方：" prop="affiliatedParty">
+                    <el-select
+                        v-model="formModel.affiliatedParty"
+                        placeholder="选择所属方"
+                        filterable
+                        clearable
+                        block
+                    >
+                        <el-option
+                            v-for="item in affiliatedPartyData"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        />
+                    </el-select>
                 </el-form-item>
-                <el-form-item label="划分类型：" prop="wbsType">
-                    <el-select v-model="formModel.wbsType" placeholder="选择划分类型" filterable clearable block>
-                        <el-option v-for="item in wbsTypeData" :key="item.value" :label="item.label" :value="item.value" />
+                <el-form-item label="文件类型" prop="fileType">
+                    <el-select
+                        v-model="formModel.fileType"
+                        placeholder="选择文件类型"
+                        filterable
+                        clearable
+                        block
+                    >
+                        <el-option
+                            v-for="item in fileTypeData"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        />
                     </el-select>
                 </el-form-item>
-                <el-form-item label="是否启用：" prop="status">
-                    <el-radio-group v-model="formModel.status">
-                        <el-radio :value="1">是</el-radio>
-                        <el-radio :value="0">否</el-radio>
-                    </el-radio-group>
+                <el-form-item
+                    label="存储目录格式"
+                    prop="storageDirectoryFormat"
+                >
+                    <el-select
+                        v-model="formModel.storageDirectoryFormat"
+                        placeholder="选择存储目录格式"
+                        filterable
+                        clearable
+                        block
+                    >
+                        <el-option
+                            v-for="item in storageFormatData"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        />
+                    </el-select>
                 </el-form-item>
             </el-form>
             <template #footer>
                 <el-button hc-btn @click="dialogClose">取消</el-button>
-                <el-button hc-btn type="primary" :loading="submitLoading" @click="dialogSubmit">提交</el-button>
+                <el-button
+                    hc-btn
+                    type="primary"
+                    :loading="submitLoading"
+                    @click="dialogSubmit"
+                    >提交</el-button
+                >
             </template>
         </hc-dialog>
     </hc-card>
 </template>
 
 <script setup>
-import { onActivated, onDeactivated, ref } from 'vue'
-import { arrToId, deepClone, formValidate, getArrValue, isNullES } from 'js-fast-way'
-import { getDictionaryData, getDictionaryName, reloadPage } from '~uti/tools'
-import { HcDelMsg } from 'hc-vue3-ui'
-import mainApi from '~api/desk/image'
+import { onActivated, onDeactivated, ref } from "vue";
+import {
+    arrToId,
+    deepClone,
+    formValidate,
+    getArrValue,
+    isNullES,
+} from "js-fast-way";
+import { getDictionaryData, getDictionaryName, reloadPage } from "~uti/tools";
+import { HcDelMsg } from "hc-vue3-ui";
+import mainApi from "~api/desk/image";
 
 //激活
 onActivated(() => {
-    getDataApi()
-})
+    getDataApi();
+});
 
 //获取接口数据
 const getDataApi = async () => {
-    affiliatedPartyData.value = await getDictionaryData('affiliated_party')
-    projectStageData.value = await getDictionaryData('project_stage')
-    fileTypeData.value = await getDictionaryData('file_type')
-    storageFormatData.value = await getDictionaryData('storage_directory_format')
-    getTableData().then()
-}
-
-const affiliatedPartyData = ref([]) //获取所属方
-const projectStageData = ref([]) //获取所属项目阶段
-const fileTypeData = ref([]) //获取文件资料类型
-const storageFormatData = ref([]) //获取储存目录格式
+    affiliatedPartyData.value = await getDictionaryData("affiliated_party");
+    projectStageData.value = await getDictionaryData("project_stage");
+    fileTypeData.value = await getDictionaryData("file_type");
+    storageFormatData.value = await getDictionaryData(
+        "storage_directory_format"
+    );
+    getTableData().then();
+};
+
+const affiliatedPartyData = ref([]); //获取所属方
+const projectStageData = ref([]); //获取所属项目阶段
+const fileTypeData = ref([]); //获取文件资料类型
+const storageFormatData = ref([]); //获取储存目录格式
 
 //搜索表单
-const searchForm = ref({ current: 1, size: 30, total: 0 })
+const searchForm = ref({ current: 1, size: 30, total: 0 });
 
 //搜索
 const searchClick = () => {
-    searchForm.value.current = 1
-    getTableData()
-}
+    searchForm.value.current = 1;
+    getTableData();
+};
 
 //分页
 const pageChange = ({ current, size }) => {
-    searchForm.value.current = current
-    searchForm.value.size = size
-    getTableData()
-}
+    searchForm.value.current = current;
+    searchForm.value.size = size;
+    getTableData();
+};
 
 //表格数据
-const tableData = ref([])
+const tableData = ref([]);
 const tableColumn = ref([
-    { key: 'classfName', name: '名称' },
-    { key: 'projectStage', name: '所属项目阶段', width: 140, align: 'center' },
-    { key: 'affiliatedParty', name: '所属方', width: 160, align: 'center' },
-    { key: 'fileType', name: '文件资料类型', width: 140, align: 'center' },
-    { key: 'storageDirectoryFormat', name: '储存目录格式', width: 140, align: 'center' },
-    { key: 'action', name: '操作', width: 100, align: 'center' },
-])
+    { key: "classfName", name: "名称" },
+    { key: "projectStage", name: "所属项目阶段", width: 140, align: "center" },
+    { key: "affiliatedParty", name: "所属方", width: 160, align: "center" },
+    { key: "fileType", name: "文件资料类型", width: 140, align: "center" },
+    {
+        key: "storageDirectoryFormat",
+        name: "储存目录格式",
+        width: 140,
+        align: "center",
+    },
+    { key: "action", name: "操作", width: 100, align: "center" },
+]);
 
 //获取表格数据
-const tableLoading = ref(false)
+const tableLoading = ref(false);
 const getTableData = async () => {
-    tableData.value = []
-    tableLoading.value = true
+    tableData.value = [];
+    tableLoading.value = true;
     const { data } = await mainApi.page({
         ...searchForm.value,
         total: null,
-    })
-    tableLoading.value = false
-    tableData.value = getArrValue(data?.records)
-    searchForm.value.total = data?.total || 0
-}
+    });
+    tableLoading.value = false;
+    tableData.value = getArrValue(data?.records);
+    searchForm.value.total = data?.total || 0;
+};
 
 //表格被选择
-const tableCheckKeys = ref([])
+const tableCheckKeys = ref([]);
 const tableCheckChange = (rows) => {
-    tableCheckKeys.value = rows
-}
+    tableCheckKeys.value = rows;
+};
 
 //单个删除
 const rowDelClick = (row) => {
-    rowRemoveApi(row.id)
-}
+    rowRemoveApi(row.id);
+};
 
 //批量删除
 const batchDelClick = () => {
-    const rows = tableCheckKeys.value
+    const rows = tableCheckKeys.value;
     if (rows.length <= 0) {
-        window.$message.warning('请选择要删除的应用')
-        return false
+        window.$message.warning("请选择要删除的应用");
+        return false;
     }
-    rowRemoveApi(arrToId(rows))
-}
+    rowRemoveApi(arrToId(rows));
+};
 
 //删除接口
 const rowRemoveApi = (ids) => {
     HcDelMsg(async (resolve) => {
-        const { isRes } = await mainApi.del(ids)
-        resolve() //关闭弹窗的回调
-        if (!isRes) return
-        window.$message.success('删除成功')
-        reloadPage()
-    })
-}
+        const { isRes } = await mainApi.del(ids);
+        resolve(); //关闭弹窗的回调
+        if (!isRes) return;
+        window.$message.success("删除成功");
+        reloadPage();
+    });
+};
 
 //新增/修改弹窗
-const isDataInfoShow = ref(false)
+const isDataInfoShow = ref(false);
 const addRowClick = () => {
-    formModel.value = { status: 1 }
-    isDataInfoShow.value = true
-}
+    formModel.value = { status: 1 };
+    isDataInfoShow.value = true;
+};
 
 //修改
 const edutRowClick = (row) => {
-    formModel.value = deepClone(row)
-    isDataInfoShow.value = true
-}
+    formModel.value = deepClone(row);
+    isDataInfoShow.value = true;
+    formModel.value.affiliatedParty = Number(formModel.value.affiliatedParty);
+    formModel.value.projectStage = Number(formModel.value.projectStage);
+};
 
 //表单
-const formRef = ref(null)
-const formModel = ref({})
+const formRef = ref(null);
+const formModel = ref({});
 const formRules = {
-    wbsName: { required: true, trigger: 'blur', message: '请输入WBS名称' },
-    wbsType: { required: true, trigger: 'blur', message: '请选择划分类型' },
-    status: { required: true, trigger: 'blur', message: '请选择是否启用' },
-}
+    classfName: { required: true, trigger: "blur", message: "请输入分类名称" },
+    projectStage: {
+        required: true,
+        trigger: "blur",
+        message: "请选择所属项目阶段",
+    },
+    affiliatedParty: {
+        required: true,
+        trigger: "blur",
+        message: "请选择所属方",
+    },
+    fileType: { required: true, trigger: "blur", message: "请选择文件类型" },
+    storageDirectoryFormat: {
+        required: true,
+        trigger: "blur",
+        message: "请选择存储目录格式",
+    },
+};
 
 //提交
-const submitLoading = ref(false)
+const submitLoading = ref(false);
 const dialogSubmit = async () => {
-    const isForm = await formValidate(formRef.value)
-    if (!isForm) return
-    submitLoading.value = true
-    const { isRes } = await mainApi.submit(formModel.value)
-    submitLoading.value = false
-    if (!isRes) return
-    window.$message.success('操作成功')
-    dialogClose()
-}
+    const isForm = await formValidate(formRef.value);
+    if (!isForm) return;
+    submitLoading.value = true;
+    const { isRes } = await mainApi.submit(formModel.value);
+    submitLoading.value = false;
+    if (!isRes) return;
+    window.$message.success("操作成功");
+    getTableData();
+    dialogClose();
+};
 
 //关闭弹窗
 const dialogClose = () => {
-    isDataInfoShow.value = false
-    submitLoading.value = false
-    formModel.value = {}
-}
+    isDataInfoShow.value = false;
+    submitLoading.value = false;
+    formModel.value = {};
+};
 
 //离开了当前页面
-onDeactivated(() => {
-
-})
+onDeactivated(() => {});
 </script>