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