<template>
|
<div class="app-container">
|
<el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" label-width="100px">
|
<el-form-item label="标题" prop="docTitle">
|
<el-input v-model="queryParams.docTitle" placeholder="请输入文档标题" clearable style="width: 240px" @keyup.enter="getDataList" />
|
</el-form-item>
|
<el-form-item label="类型" prop="docType">
|
<el-select v-model="data.docType" placeholder="文档类型" clearable style="width: 240px">
|
<el-option v-for="dict in doc_type" :key="dict.value" :label="dict.label" :value="dict.value" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="状态" prop="useState">
|
<el-select v-model="queryParams.useState" placeholder="文档状态" clearable style="width: 240px">
|
<el-option :key="0" label="全部" value="" />
|
<el-option :key="1" label="正常" :value="1" />
|
<el-option :key="2" label="禁用" :value="2" />
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" icon="Search" @click="getDataList">搜索</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 icon="Plus" :disabled="power.add" @click="handleAdd">新增</el-button>
|
</el-col>
|
<el-col :span="1.5">
|
<el-button type="danger" plain icon="Delete" :disabled="power.multiple" @click="handleDelete()">删除</el-button>
|
</el-col>
|
<right-toolbar v-model:showSearch="showSearch" @queryTable="getDataList"></right-toolbar>
|
</el-row>
|
<el-table v-loading="tableOption.loading" :data="dataTable" @selection-change="handleSelectionChange" @cell-dblclick="handleInfo">
|
<el-table-column type="selection" width="50" align="center" />
|
<el-table-column label="标题" align="center" key="docTitle" prop="docTitle" />
|
<el-table-column label="文档类型" align="center" width="200">
|
<template #default="scope">
|
<span>{{ dispDocType(scope.row.docType) }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="状态" align="center" key="shopState" width="100">
|
<template #default="scope">
|
<span>{{ scope.row.useState == 1 ? "正常" : "禁用" }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="创建人" align="center" key="createName" prop="createName" width="120" />
|
<el-table-column label="创建时间" align="center" key="createTime" prop="createTime" width="170" />
|
<el-table-column label="操作" align="center" width="120">
|
<template #default="scope">
|
<el-tooltip content="修改" placement="top" v-if="!power.single">
|
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:role:edit']"></el-button>
|
</el-tooltip>
|
<el-tooltip content="删除" placement="top" v-if="scope.row.roleId !== 1">
|
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:role:remove']"></el-button>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
</el-table>
|
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getDataList" />
|
|
<el-dialog :title="dialogTitle" v-model="isOpenFormData" width="1000px" draggable :close-on-click-modal="false" append-to-body destroy-on-close>
|
<el-form ref="formRef" :model="data" :rules="formData.rules" label-width="100px">
|
<el-form-item label="标题" prop="docTitle">
|
<el-input v-model="data.docTitle" placeholder="请输入文档标题" style="width: 300px" />
|
</el-form-item>
|
<el-form-item label="内容" prop="docContent">
|
<!-- <el-input v-model="data.docContent" type="textarea" :row="5" placeholder="请输入文档内容" style="width: 300px" /> -->
|
<Editor v-model="data.docContent"></Editor>
|
</el-form-item>
|
<el-form-item label="类型" prop="docType">
|
<el-select v-model="data.docType" placeholder="文档类型" clearable style="width: 240px">
|
<el-option v-for="dict in doc_type" :key="dict.value" :label="dict.label" :value="dict.value" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="备注" prop="remark">
|
<el-input v-model="data.remark" placeholder="文档备注" style="width: 300px" />
|
</el-form-item>
|
<el-form-item label="状态" prop="useState">
|
<el-switch v-model="data.useState" :active-value="1" :inactive-value="2" active-text="启用"></el-switch>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<el-button @click="formData.isOpenFormData = false">取消</el-button>
|
<el-button type="primary" @click="submitDataScope"> 提交 </el-button>
|
</template>
|
</el-dialog>
|
<!--详情-->
|
<el-dialog title="文档详情" :close-on-click-modal="false" v-model="state.isOpenInfo" width="1000px" top="20vh" draggable>
|
<div style="width: 100%; text-align: center">
|
<h3>{{ data.docTitle }}</h3>
|
</div>
|
<div v-html="data.docContent"></div>
|
<el-descriptions>
|
<el-descriptions-item label="类型" width="260">{{ dispDocType(data.docType) }}</el-descriptions-item>
|
<el-descriptions-item label="状态" width="260">{{ data.useState == 1 ? "正常" : "禁用" }}</el-descriptions-item>
|
<el-descriptions-item label="创建人" width="260">{{ data.createName }}</el-descriptions-item>
|
<el-descriptions-item label="备注" width="260">{{ data.remark }}</el-descriptions-item>
|
</el-descriptions>
|
</el-dialog>
|
</div>
|
</template>
|
<script setup lang="ts">
|
// import { reactive, onMounted, toRefs, getCurrentInstance, ref } from "vue";
|
import { saveDoc, getDocList, updateDoc, deleteDoc, getDocInfo } from "@/api/web/doc";
|
import { docDTO, TypeDocDTO } from "@/types/DTO/webDocDTO";
|
import Editor from "@/components/Editor/index.vue";
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
const { doc_type } = proxy.useDict("doc_type");
|
|
const ids = ref<number[]>([]);
|
const state = reactive({
|
dataTable: [] as TypeDocDTO[], //数据列表
|
total: 0, //总条数
|
tableOption: {
|
//表格配置
|
loading: false,
|
},
|
power: {
|
//操作权限
|
add: false,
|
single: false, //
|
multiple: true, //
|
},
|
showSearch: true, //是否显示搜索
|
showAddGoods: false, //是否显示新增
|
isOpenSeletGoods: false, //是否显示选择商品
|
isOpenInfo: false, //是否显示文档详情
|
});
|
const { dataTable, total, tableOption, power, showSearch } = toRefs(state);
|
|
onMounted(() => {
|
getDataList();
|
});
|
|
//#region commonDisp
|
|
/**
|
* 显示文档类型
|
* @param e
|
*/
|
const dispDocType = (e: string) => {
|
return doc_type.value.find((f: Dict.dictType) => f.value == e)?.label;
|
};
|
|
//#endregion
|
|
//#region 查询
|
const queryRef = ref<Omit<Common.formDataType, "formRef">>();
|
const queryParams = reactive({
|
//查询配置参数
|
pageNum: 1,
|
pageSize: 10,
|
docTitle: "",
|
useState: "",
|
docType: "",
|
});
|
|
/**
|
* 获取数据列表
|
*/
|
const getDataList = async () => {
|
await getDocList(queryParams).then((res) => {
|
if (res.code == 200) {
|
state.dataTable = res.rows;
|
state.tableOption.loading = false;
|
state.total = res.total;
|
}
|
});
|
};
|
/**
|
* 重置
|
*/
|
const resetQuery = () => {
|
queryRef.value!.resetFields();
|
};
|
//#endregion
|
|
//#region 新增
|
|
/**
|
* 新增
|
*/
|
const handleAdd = () => {
|
formData.dialogTitle = "新增文档";
|
formData.handleStatus = 1;
|
formData.data = { ...docDTO };
|
formData.isOpenFormData = true;
|
setTimeout(() => {
|
formData.formRef!.clearValidate();
|
});
|
};
|
|
interface formA extends Common.formDataType<TypeDocDTO> {}
|
|
const formData = reactive<formA>({
|
data: {} as TypeDocDTO,
|
isOpenFormData: false, //是否展开新增对话框
|
dialogTitle: "", //弹窗标题
|
handleStatus: 0,
|
formRef: null,
|
rules: {
|
docTitle: [{ required: true, message: "请填写文档标题", trigger: "change" }],
|
docContent: [{ required: true, message: "请填写文档内容", trigger: "change" }],
|
// docType: [{ required: true, message: "请选择文档类型", trigger: "change" }],
|
},
|
});
|
|
const { data, isOpenFormData, dialogTitle, formRef } = toRefs(formData);
|
|
/**
|
* 提交表单检验
|
*/
|
const submitDataScope = () => {
|
formData.formRef!.validate((valid) => {
|
if (valid) {
|
if (formData.data.id) {
|
editData();
|
} else {
|
SaveData();
|
}
|
}
|
});
|
};
|
|
/**
|
* 保存
|
*/
|
const SaveData = async () => {
|
await saveDoc(formData.data).then((res) => {
|
if (res.code == 200) {
|
proxy.$modal.msgSuccess("新增成功");
|
state.isOpenSeletGoods = false;
|
getDataList();
|
formData.isOpenFormData = false;
|
} else {
|
proxy.$modal.msgError(res.msg);
|
}
|
});
|
};
|
|
/**
|
* 修改
|
*/
|
const editData = async () => {
|
await updateDoc(formData.data).then((res) => {
|
if (res.code == 200) {
|
proxy.$modal.msgSuccess("操作成功");
|
state.isOpenSeletGoods = false;
|
getDataList();
|
formData.isOpenFormData = false;
|
} else {
|
proxy.$modal.msgError(res.msg);
|
}
|
});
|
};
|
|
//#endregion
|
|
//#region 富文本
|
|
//#endregion
|
|
//#region 删除
|
/**
|
* 选择时
|
* @param {} row
|
*/
|
const handleSelectionChange = (row: TypeDocDTO[]) => {
|
ids.value = row.map((item: TypeDocDTO) => item.id);
|
state.power.multiple = !ids.value.length;
|
};
|
|
/**
|
* 删除
|
*/
|
const handleDelete = (row?: TypeDocDTO) => {
|
const roleIds = (row && row.id) || ids.value;
|
proxy.$modal
|
.confirm("是否确认删除选中的文档?")
|
.then(function () {
|
return deleteDoc(roleIds);
|
})
|
.then(() => {
|
getDataList();
|
proxy.$modal.msgSuccess("删除成功");
|
})
|
.catch(() => {});
|
};
|
|
//#endregion
|
|
//#region 修改
|
|
/**
|
* 修改
|
*/
|
const handleUpdate = (e: TypeDocDTO) => {
|
getDataInfo(e.id, () => {
|
formData.dialogTitle = "修改文档";
|
formData.handleStatus = 2;
|
formData.isOpenFormData = true;
|
});
|
};
|
|
//#endregion
|
|
//#region 详情
|
|
/**
|
* 展开详情
|
*/
|
const handleInfo = (e: TypeDocDTO) => {
|
getDataInfo(e.id, () => {
|
state.isOpenInfo = true;
|
});
|
};
|
|
/**
|
* 获取详情
|
* @param {} e
|
*/
|
const getDataInfo = async (e: number, fnc: () => void) => {
|
await getDocInfo(e).then((res) => {
|
if (res.code == 200) {
|
let data = res.data;
|
formData.data = { ...data };
|
if (fnc != null) {
|
fnc();
|
}
|
}
|
});
|
};
|
|
//#endregion
|
|
/**
|
* 导出
|
*/
|
const handleExport = () => {};
|
</script>
|
|
<style scoped lang="scss">
|
._el-row {
|
padding: 5px 0px;
|
border-bottom: 1px solid var(--el-border-color);
|
margin-left: 20px;
|
align-items: center;
|
}
|
.actImage {
|
max-width: 250px;
|
}
|
.el-image {
|
width: 100%;
|
height: 100%;
|
}
|
</style>
|
