AlertSystem 分页列表字段调整

src/views/system/AlertSystem.vue

@@ -0,0 +1,190 @@
+<template>
+  <a-card :bordered="false">
+    <!-- 搜索栏 -->
+    <search-form :items="formItems" v-model="queryParam" @search="searchQuery">
+      <a-space style="float: right" class="btn-group" slot="additional">
+        <a-button @click="handleAdd" type="primary">
+          <img src="@/assets/images/global/add.png" alt="" />
+          Add
+        </a-button>
+        <a-button @click="handleEdit" type="primary">
+          <img src="@/assets/images/global/edit.png" alt="" />
+          Edit
+        </a-button>
+        <a-button @click="onDel" type="primary">
+          <img src="@/assets/images/global/delete.png" alt="" />
+          Delete
+        </a-button>
+      </a-space>
+    </search-form>
+    <!-- 搜索栏结束 -->
+    <!-- 列表 -->
+    <div>
+      <custom-table
+        size="middle"
+        rowKey="id"
+        :columns="columns"
+        :list="dataSource"
+        :pagination="ipagination"
+        :loading="loading"
+        @change="handleTableChange"
+        :selectedRowKeys.sync="selectedRowKeys"
+        :scroll="{ y: 'calc(100vh - 370px)' }"
+      >
+      </custom-table>
+    </div>
+    <!-- 列表结束 -->
+    <!-- 新增/编辑 账号 -->
+    <custom-modal :title="isAdd ? 'Add' : 'Edit'" v-model="visible" :width="475" :okHandler="onSubmit">
+      <a-form-model
+        ref="form"
+        layout="horizontal"
+        :model="accountModel"
+        :rules="rules"
+        :labelCol="{ style: { width: '80px' } }"
+        :wrapperCol="{ style: { width: '300px' } }"
+        autocomplete="off"
+        :colon="false"
+      >
+        <a-form-model-item label="Type" prop="type">
+          <j-dict-select-tag v-model="accountModel.type" dictCode="Alert_System_Code"></j-dict-select-tag>
+        </a-form-model-item>
+        <a-form-model-item label="Code" prop="code">
+          <a-input type="text" v-model="accountModel.code"></a-input>
+        </a-form-model-item>
+        <a-form-model-item label="Content" prop="content">
+          <a-input type="text" v-model="accountModel.content"></a-input>
+        </a-form-model-item>
+      </a-form-model>
+    </custom-modal>
+    <!-- 新增/编辑 账号结束 -->
+  </a-card>
+</template>
+
+<script>
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import { postAction } from '@/api/manage'
+import { cloneDeep } from 'lodash'
+import FormMixin from '@/mixins/FormMixin'
+
+export default {
+  name: 'UserList',
+  mixins: [JeecgListMixin, FormMixin],
+  data() {
+    return {
+      queryParam: {},
+      columns: [
+        {
+          title: 'TYPE',
+          align: 'left',
+          dataIndex: 'typeStr',
+        },
+        {
+          title: 'CODE',
+          align: 'left',
+          dataIndex: 'code',
+        },
+        {
+          title: 'CONTENT',
+          align: 'left',
+          dataIndex: 'content',
+        },
+      ],
+      url: {
+        list: '/sys/alertSystem/list',
+        delete: '/sys/alertSystem/delete',
+      },
+      roleOptions: [],
+      visible: false,
+      isAdd: false,
+      accountModel: {},
+      rules: {
+        type: [{ required: true, message: 'Please Select Type' }],
+        code: [{ required: true, message: 'Please Enter Code' }],
+        content: [{ required: true, message: 'Please Enter Content' }],
+      },
+    }
+  },
+  created() {},
+  methods: {
+    handleAdd() {
+      this.visible = true
+      this.isAdd = true
+      this.accountModel = {}
+    },
+    handleEdit() {
+      if (this.selectedRowKeys && this.selectedRowKeys.length) {
+        this.visible = true
+        this.isAdd = false
+        const find = this.dataSource.find((item) => item.id === this.selectedRowKeys[0])
+        this.accountModel = {
+          type: find.type,
+          code: find.code,
+          content: find.content,
+        }
+      } else {
+        this.$message.warn('Please Select An Item To Edit')
+      }
+    },
+
+    // 提交
+    async onSubmit() {
+      await this.$refs.form.validate()
+      let params = { ...this.accountModel }
+      if (!this.isAdd) {
+        params.id = this.selectedRowKeys[0]
+      }
+      let { success, message } = await postAction('/sys/alertSystem/saveOrUpdate', params)
+      if (success) {
+        this.$message.success(`${this.isAdd ? 'Add' : 'Edit'} Success`)
+        this.loadData()
+      } else {
+        this.$message.error(`${message}`)
+      }
+    },
+    onDel() {
+      if (this.selectedRowKeys && this.selectedRowKeys.length) {
+        const find = this.dataSource.find((item) => item.id === this.selectedRowKeys[0])
+        this.$confirm({
+          title: `Are you sure to delete ${find.content}`,
+          okText: 'OK',
+          cancelText: 'Cancel',
+          onOk: () => {
+            this.handleDelete(this.selectedRowKeys[0])
+          },
+        })
+      } else {
+        this.$message.warn('Please Select An Item To Delete')
+      }
+    },
+  },
+  computed: {
+    formItems() {
+      return [
+        {
+          type: 'a-input',
+          label: 'Code',
+          name: 'code',
+          props: {
+            style: {
+              width: '220px',
+            },
+          },
+          style: {
+            width: 'auto',
+          },
+        },
+      ]
+    },
+  },
+}
+</script>
+<style scoped lang="less">
+@import '~@assets/less/common.less';
+.btn-group {
+  img {
+    margin-right: 12px;
+    height: 18px;
+  }
+}
+</style>