admin/src/views/desk/image.vue

<template>
    <hc-card>
        <template #header>
            <div class="w-120px">
                <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">
                <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
            >
        </template>
        <hc-table
            :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>
            </template>
            <template #affiliatedParty="{ row }">
                <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>
            </template>
            <template #action="{ row }">
                <el-link type="warning" @click="edutRowClick(row)"
                    >修改</el-link
                >
                <el-link type="danger" @click="rowDelClick(row)">删除</el-link>
            </template>
        </hc-table>
        <template #action>
            <hc-pages :pages="searchForm" @change="pageChange" />
        </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="分类名称：" 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="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="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
                >
            </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";

//激活
onActivated(() => {
    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([]); //获取储存目录格式

//搜索表单
const searchForm = ref({ current: 1, size: 30, total: 0 });

//搜索
const searchClick = () => {
    searchForm.value.current = 1;
    getTableData();
};

//分页
const pageChange = ({ current, size }) => {
    searchForm.value.current = current;
    searchForm.value.size = size;
    getTableData();
};

//表格数据
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" },
]);

//获取表格数据
const tableLoading = ref(false);
const getTableData = async () => {
    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;
};

//表格被选择
const tableCheckKeys = ref([]);
const tableCheckChange = (rows) => {
    tableCheckKeys.value = rows;
};

//单个删除
const rowDelClick = (row) => {
    rowRemoveApi(row.id);
};

//批量删除
const batchDelClick = () => {
    const rows = tableCheckKeys.value;
    if (rows.length <= 0) {
        window.$message.warning("请选择要删除的应用");
        return false;
    }
    rowRemoveApi(arrToId(rows));
};

//删除接口
const rowRemoveApi = (ids) => {
    HcDelMsg(async (resolve) => {
        const { isRes } = await mainApi.del(ids);
        resolve(); //关闭弹窗的回调
        if (!isRes) return;
        window.$message.success("删除成功");
        reloadPage();
    });
};

//新增/修改弹窗
const isDataInfoShow = ref(false);
const addRowClick = () => {
    formModel.value = { status: 1 };
    isDataInfoShow.value = true;
};

//修改
const edutRowClick = (row) => {
    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 formRules = {
    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 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("操作成功");
    getTableData();
    dialogClose();
};

//关闭弹窗
const dialogClose = () => {
    isDataInfoShow.value = false;
    submitLoading.value = false;
    formModel.value = {};
};

//离开了当前页面
onDeactivated(() => {});
</script>