Newer
Older
KaiFengPC / src / views / system / config / index.vue
@zhangdeliang zhangdeliang on 23 May 9 KB 初始化项目
  1. <template>
  2. <div class="publicContainer">
  3. <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
  4. <el-form-item label="参数名称" prop="configName">
  5. <el-input v-model="queryParams.configName" placeholder="请输入参数名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
  6. </el-form-item>
  7. <el-form-item label="参数键名" prop="configKey">
  8. <el-input v-model="queryParams.configKey" placeholder="请输入参数键名" clearable style="width: 240px" @keyup.enter="handleQuery" />
  9. </el-form-item>
  10. <el-form-item label="系统内置" prop="configType">
  11. <el-select v-model="queryParams.configType" placeholder="系统内置" clearable>
  12. <el-option v-for="dict in sys_yes_no" :key="dict.value" :label="dict.label" :value="dict.value" />
  13. </el-select>
  14. </el-form-item>
  15. <el-form-item label="创建时间" style="width: 308px">
  16. <el-date-picker
  17. v-model="dateRange"
  18. value-format="YYYY-MM-DD"
  19. type="daterange"
  20. range-separator="-"
  21. start-placeholder="开始日期"
  22. end-placeholder="结束日期"
  23. ></el-date-picker>
  24. </el-form-item>
  25. <el-form-item>
  26. <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
  27. <el-button type="success" icon="Refresh" @click="resetQuery">重置</el-button>
  28. </el-form-item>
  29. </el-form>
  30.  
  31. <el-row :gutter="10" class="mb8">
  32. <el-col :span="1.5">
  33. <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:config:add']">新增</el-button>
  34. </el-col>
  35. <el-col :span="1.5">
  36. <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate" v-hasPermi="['system:config:edit']"
  37. >修改</el-button
  38. >
  39. </el-col>
  40. <el-col :span="1.5">
  41. <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:config:remove']"
  42. >删除</el-button
  43. >
  44. </el-col>
  45. <el-col :span="1.5">
  46. <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:config:export']">导出</el-button>
  47. </el-col>
  48. <el-col :span="1.5">
  49. <el-button type="danger" plain icon="Refresh" @click="handleRefreshCache" v-hasPermi="['system:config:remove']">刷新缓存</el-button>
  50. </el-col>
  51. <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
  52. </el-row>
  53.  
  54. <el-table v-loading="loading" :data="configList" @selection-change="handleSelectionChange">
  55. <el-table-column type="selection" width="55" />
  56. <el-table-column label="参数主键" prop="configId" />
  57. <el-table-column label="模块编号" prop="moduleKey"></el-table-column>
  58. <el-table-column label="参数名称" prop="configName" show-overflow-tooltip />
  59. <el-table-column label="参数键名" prop="configKey" show-overflow-tooltip />
  60. <el-table-column label="参数键值" prop="configValue" show-overflow-tooltip />
  61. <el-table-column label="系统内置" prop="configType">
  62. <template #default="scope">
  63. <dict-tag :options="sys_yes_no" :value="scope.row.configType" />
  64. </template>
  65. </el-table-column>
  66. <el-table-column label="备注" prop="remark" show-overflow-tooltip />
  67. <el-table-column label="创建时间" prop="createTime" width="180">
  68. <template #default="scope">
  69. <span>{{ parseTime(scope.row.createTime) }}</span>
  70. </template>
  71. </el-table-column>
  72. <el-table-column label="操作" width="150" class-name="small-padding fixed-width">
  73. <template #default="scope">
  74. <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:config:edit']">修改</el-button>
  75. <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:config:remove']"
  76. >删除</el-button
  77. >
  78. </template>
  79. </el-table-column>
  80. </el-table>
  81.  
  82. <pagination
  83. v-show="total > 0"
  84. :total="total"
  85. v-model:page="queryParams.pageNum"
  86. v-model:limit="queryParams.pageSize"
  87. @pagination="getList"
  88. />
  89.  
  90. <!-- 添加或修改参数配置对话框 -->
  91. <el-dialog :title="title" v-model="open" width="500px" append-to-body>
  92. <el-form ref="configRef" :model="form" :rules="rules" label-width="80px">
  93. <el-form-item label="模块编号" prop="moduleKey">
  94. <el-select v-model="form.moduleKey" placeholder="请选择模块编号" clearable style="width: 240px">
  95. <el-option v-for="dict in sysModuleList" :key="dict.moduleKey" :label="dict.moduleName" :value="dict.moduleKey" />
  96. </el-select>
  97. </el-form-item>
  98. <el-form-item label="参数名称" prop="configName">
  99. <el-input v-model="form.configName" placeholder="请输入参数名称" />
  100. </el-form-item>
  101. <el-form-item label="参数键名" prop="configKey">
  102. <el-input v-model="form.configKey" placeholder="请输入参数键名" />
  103. </el-form-item>
  104. <el-form-item label="参数键值" prop="configValue">
  105. <el-input v-model="form.configValue" placeholder="请输入参数键值" />
  106. </el-form-item>
  107. <el-form-item label="系统内置" prop="configType">
  108. <el-radio-group v-model="form.configType">
  109. <el-radio v-for="dict in sys_yes_no" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
  110. </el-radio-group>
  111. </el-form-item>
  112. <el-form-item label="备注" prop="remark">
  113. <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
  114. </el-form-item>
  115. </el-form>
  116. <template #footer>
  117. <div class="dialog-footer">
  118. <el-button type="info" @click="cancel">取 消</el-button>
  119. <el-button type="primary" @click="submitForm">确 定</el-button>
  120. </div>
  121. </template>
  122. </el-dialog>
  123. </div>
  124. </template>
  125.  
  126. <script setup name="Config">
  127. import { listConfig, getConfig, delConfig, addConfig, updateConfig, refreshCache } from '@/api/system/config';
  128. import { listsysModule } from '@/api/system/sysModule';
  129. const { proxy } = getCurrentInstance();
  130. const { sys_yes_no } = proxy.useDict('sys_yes_no');
  131.  
  132. const configList = ref([]);
  133. const open = ref(false);
  134. const loading = ref(true);
  135. const showSearch = ref(true);
  136. const ids = ref([]);
  137. const single = ref(true);
  138. const multiple = ref(true);
  139. const total = ref(0);
  140. const title = ref('');
  141. const dateRange = ref([]);
  142. const sysModuleList = ref([]); //系统模块列表
  143. const data = reactive({
  144. form: {},
  145. queryParams: {
  146. pageNum: 1,
  147. pageSize: 10,
  148. configName: undefined,
  149. configKey: undefined,
  150. configType: undefined,
  151. },
  152. rules: {
  153. moduleKey: [{ required: true, message: '模块编号不能为空', trigger: 'change' }],
  154. configName: [{ required: true, message: '参数名称不能为空', trigger: 'blur' }],
  155. configKey: [{ required: true, message: '参数键名不能为空', trigger: 'blur' }],
  156. configValue: [{ required: true, message: '参数键值不能为空', trigger: 'blur' }],
  157. },
  158. });
  159.  
  160. const { queryParams, form, rules } = toRefs(data);
  161.  
  162. // 查询模块编号列表
  163. function getListsysModule() {
  164. listsysModule().then(res => {
  165. sysModuleList.value = res.data;
  166. });
  167. }
  168.  
  169. /** 查询参数列表 */
  170. function getList() {
  171. loading.value = true;
  172. // queryParams.value.moduleKey = "system";
  173. listConfig(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
  174. configList.value = response.data;
  175. total.value = response.total;
  176. loading.value = false;
  177. });
  178. }
  179. /** 取消按钮 */
  180. function cancel() {
  181. open.value = false;
  182. reset();
  183. }
  184. /** 表单重置 */
  185. function reset() {
  186. form.value = {
  187. configId: undefined,
  188. configName: undefined,
  189. configKey: undefined,
  190. configValue: undefined,
  191. configType: 'Y',
  192. remark: undefined,
  193. };
  194. proxy.resetForm('configRef');
  195. }
  196. /** 搜索按钮操作 */
  197. function handleQuery() {
  198. queryParams.value.pageNum = 1;
  199. getList();
  200. }
  201. /** 重置按钮操作 */
  202. function resetQuery() {
  203. dateRange.value = [];
  204. proxy.resetForm('queryRef');
  205. handleQuery();
  206. }
  207. /** 多选框选中数据 */
  208. function handleSelectionChange(selection) {
  209. ids.value = selection.map(item => item.configId);
  210. single.value = selection.length != 1;
  211. multiple.value = !selection.length;
  212. }
  213. /** 新增按钮操作 */
  214. function handleAdd() {
  215. reset();
  216. open.value = true;
  217. title.value = '添加参数';
  218. }
  219. /** 修改按钮操作 */
  220. function handleUpdate(row) {
  221. reset();
  222. const configId = row.configId || ids.value;
  223. getConfig(configId).then(response => {
  224. form.value = response.data;
  225. open.value = true;
  226. title.value = '修改参数';
  227. });
  228. }
  229. /** 提交按钮 */
  230. function submitForm() {
  231. proxy.$refs['configRef'].validate(valid => {
  232. if (valid) {
  233. if (form.value.configId != undefined) {
  234. updateConfig(form.value).then(response => {
  235. proxy.$modal.msgSuccess('修改成功');
  236. open.value = false;
  237. getList();
  238. });
  239. } else {
  240. addConfig(form.value).then(response => {
  241. proxy.$modal.msgSuccess('新增成功');
  242. open.value = false;
  243. getList();
  244. });
  245. }
  246. }
  247. });
  248. }
  249. /** 删除按钮操作 */
  250. function handleDelete(row) {
  251. const configIds = row.configId || ids.value;
  252. proxy.$modal
  253. .confirm('是否确认删除参数编号为"' + configIds + '"的数据项?')
  254. .then(function () {
  255. return delConfig(configIds);
  256. })
  257. .then(() => {
  258. getList();
  259. proxy.$modal.msgSuccess('删除成功');
  260. })
  261. .catch(() => {});
  262. }
  263. /** 导出按钮操作 */
  264. function handleExport() {
  265. proxy.download(
  266. 'system/config/export',
  267. {
  268. ...queryParams.value,
  269. },
  270. `config_${new Date().getTime()}.xlsx`
  271. );
  272. }
  273. /** 刷新缓存按钮操作 */
  274. function handleRefreshCache() {
  275. refreshCache().then(() => {
  276. proxy.$modal.msgSuccess('刷新缓存成功');
  277. });
  278. }
  279.  
  280. getList();
  281. getListsysModule();
  282. </script>