邃芒慧影管理端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

326 line
7.7 KiB

  1. <!-- 字典数据 -->
  2. <script setup lang="ts">
  3. import {
  4. getDictPage,
  5. getDictFormData,
  6. addDict,
  7. updateDict,
  8. deleteDict,
  9. } from "@/api/dict";
  10. import { DictPageVO, DictForm, DictQuery } from "@/api/dict/types";
  11. defineOptions({
  12. name: "DictData",
  13. inheritAttrs: false,
  14. });
  15. const props = defineProps({
  16. typeCode: {
  17. type: String,
  18. default: () => {
  19. return "";
  20. },
  21. },
  22. typeName: {
  23. type: String,
  24. default: () => {
  25. return "";
  26. },
  27. },
  28. });
  29. watch(
  30. () => props.typeCode,
  31. (newVal: string) => {
  32. queryParams.typeCode = newVal;
  33. formData.typeCode = newVal;
  34. resetQuery();
  35. }
  36. );
  37. const queryFormRef = ref(ElForm);
  38. const dataFormRef = ref(ElForm);
  39. const loading = ref(false);
  40. const ids = ref<number[]>([]);
  41. const total = ref(0);
  42. const queryParams = reactive<DictQuery>({
  43. pageNum: 1,
  44. pageSize: 10,
  45. typeCode: props.typeCode,
  46. });
  47. const dictList = ref<DictPageVO[]>();
  48. const dialog = reactive<DialogOption>({
  49. visible: false,
  50. });
  51. const formData = reactive<DictForm>({
  52. status: 1,
  53. typeCode: props.typeCode,
  54. sort: 1,
  55. });
  56. const rules = reactive({
  57. name: [{ required: true, message: "请输入字典名称", trigger: "blur" }],
  58. value: [{ required: true, message: "请输入字典值", trigger: "blur" }],
  59. });
  60. /**
  61. * 查询
  62. */
  63. function handleQuery() {
  64. if (queryParams.typeCode) {
  65. loading.value = true;
  66. getDictPage(queryParams)
  67. .then(({ data }) => {
  68. dictList.value = data.list;
  69. total.value = data.total;
  70. })
  71. .finally(() => (loading.value = false));
  72. }
  73. }
  74. /**
  75. * 重置查询
  76. */
  77. function resetQuery() {
  78. queryFormRef.value.resetFields();
  79. queryParams.pageNum = 1;
  80. handleQuery();
  81. }
  82. /**
  83. * 行checkbox change事件
  84. *
  85. * @param selection
  86. */
  87. function handleSelectionChange(selection: any) {
  88. ids.value = selection.map((item: any) => item.id);
  89. }
  90. /**
  91. * 打开字典表单弹窗
  92. *
  93. * @param dictId 字典ID
  94. */
  95. function openDialog(dictId?: number) {
  96. dialog.visible = true;
  97. if (dictId) {
  98. dialog.title = "修改字典";
  99. getDictFormData(dictId).then(({ data }) => {
  100. Object.assign(formData, data);
  101. });
  102. } else {
  103. dialog.title = "新增字典";
  104. }
  105. }
  106. /**
  107. * 字典表单提交
  108. */
  109. function handleSubmit() {
  110. dataFormRef.value.validate((isValid: boolean) => {
  111. if (isValid) {
  112. loading.value = false;
  113. const dictId = formData.id;
  114. if (dictId) {
  115. updateDict(dictId, formData)
  116. .then(() => {
  117. ElMessage.success("修改成功");
  118. closeDialog();
  119. resetQuery();
  120. })
  121. .finally(() => (loading.value = false));
  122. } else {
  123. addDict(formData)
  124. .then(() => {
  125. ElMessage.success("新增成功");
  126. closeDialog();
  127. resetQuery();
  128. })
  129. .finally(() => (loading.value = false));
  130. }
  131. }
  132. });
  133. }
  134. /**
  135. * 关闭弹窗
  136. */
  137. function closeDialog() {
  138. dialog.visible = false;
  139. resetForm();
  140. }
  141. /**
  142. * 重置表单
  143. */
  144. function resetForm() {
  145. dataFormRef.value.resetFields();
  146. dataFormRef.value.clearValidate();
  147. formData.id = undefined;
  148. formData.status = 1;
  149. formData.sort = 1;
  150. formData.typeCode = props.typeCode;
  151. }
  152. /**
  153. * 删除字典
  154. */
  155. function handleDelete(dictId?: number) {
  156. const dictIds = [dictId || ids.value].join(",");
  157. if (!dictIds) {
  158. ElMessage.warning("请勾选删除项");
  159. return;
  160. }
  161. ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
  162. confirmButtonText: "确定",
  163. cancelButtonText: "取消",
  164. type: "warning",
  165. }).then(() => {
  166. deleteDict(dictIds).then(() => {
  167. ElMessage.success("删除成功");
  168. resetQuery();
  169. });
  170. });
  171. }
  172. onMounted(() => {
  173. handleQuery();
  174. });
  175. </script>
  176. <template>
  177. <div class="app-container">
  178. <div class="search-container">
  179. <!-- 搜索表单 -->
  180. <el-form ref="queryFormRef" :model="queryParams" :inline="true">
  181. <el-form-item label="关键字" prop="name">
  182. <el-input
  183. v-model="queryParams.name"
  184. placeholder="字典名称"
  185. clearable
  186. />
  187. </el-form-item>
  188. <el-form-item>
  189. <el-button type="primary" @click="handleQuery"
  190. ><i-ep-search />搜索</el-button
  191. >
  192. <el-button @click="resetQuery"> <i-ep-refresh />重置</el-button>
  193. </el-form-item>
  194. </el-form>
  195. </div>
  196. <el-card shadow="never">
  197. <template #header>
  198. <el-button
  199. v-hasPerm="['sys:dict:add']"
  200. type="success"
  201. @click="openDialog()"
  202. ><i-ep-plus />新增</el-button
  203. >
  204. <el-button
  205. v-hasPerm="['sys:dict:delete']"
  206. type="danger"
  207. :disabled="ids.length === 0"
  208. @click="handleDelete()"
  209. ><i-ep-delete />删除</el-button
  210. >
  211. </template>
  212. <!-- 数据表格 -->
  213. <el-table
  214. v-loading="loading"
  215. :data="dictList"
  216. border
  217. @selection-change="handleSelectionChange"
  218. >
  219. <el-table-column type="selection" width="50" />
  220. <el-table-column label="字典名称" prop="name" />
  221. <el-table-column label="字典值" prop="value" />
  222. <el-table-column label="状态" align="center">
  223. <template #default="scope">
  224. <el-tag v-if="scope.row.status === 1" type="success">启用</el-tag>
  225. <el-tag v-else type="info">禁用</el-tag>
  226. </template>
  227. </el-table-column>
  228. <el-table-column fixed="right" label="操作" align="center">
  229. <template #default="scope">
  230. <el-button
  231. v-hasPerm="['sys:dict:edit']"
  232. type="primary"
  233. link
  234. @click="openDialog(scope.row.id)"
  235. ><i-ep-edit />编辑</el-button
  236. >
  237. <el-button
  238. v-hasPerm="['sys:dict:delete']"
  239. type="primary"
  240. link
  241. @click.stop="handleDelete(scope.row.id)"
  242. ><i-ep-delete />删除</el-button
  243. >
  244. </template>
  245. </el-table-column>
  246. </el-table>
  247. <pagination
  248. v-if="total > 0"
  249. v-model:total="total"
  250. v-model:page="queryParams.pageNum"
  251. v-model:limit="queryParams.pageSize"
  252. @pagination="handleQuery"
  253. />
  254. </el-card>
  255. <!-- 表单弹窗 -->
  256. <el-dialog
  257. v-model="dialog.visible"
  258. :title="dialog.title"
  259. width="500px"
  260. @close="closeDialog"
  261. >
  262. <el-form
  263. ref="dataFormRef"
  264. :model="formData"
  265. :rules="rules"
  266. label-width="100px"
  267. >
  268. <el-form-item label="字典名称">{{ typeName }}</el-form-item>
  269. <el-form-item label="字典名称" prop="name">
  270. <el-input v-model="formData.name" placeholder="请输入字典名称" />
  271. </el-form-item>
  272. <el-form-item label="字典值" prop="value">
  273. <el-input v-model="formData.value" placeholder="字典值" />
  274. </el-form-item>
  275. <el-form-item label="排序" prop="sort">
  276. <el-input-number
  277. v-model="formData.sort"
  278. controls-position="right"
  279. :min="0"
  280. />
  281. </el-form-item>
  282. <el-form-item label="状态" prop="status">
  283. <el-radio-group v-model="formData.status">
  284. <el-radio :label="1">正常</el-radio>
  285. <el-radio :label="0">停用</el-radio>
  286. </el-radio-group>
  287. </el-form-item>
  288. <el-form-item label="备注" prop="remark">
  289. <el-input v-model="formData.remark" type="textarea" />
  290. </el-form-item>
  291. </el-form>
  292. <template #footer>
  293. <div class="dialog-footer">
  294. <el-button type="primary" @click="handleSubmit">确 定</el-button>
  295. <el-button @click="closeDialog">取 消</el-button>
  296. </div>
  297. </template>
  298. </el-dialog>
  299. </div>
  300. </template>