租户参数

src/views/main/DJYTenantParam/itemEditForm.vue

@@ -25,24 +25,61 @@
         @cell-dblclick="cellDBLClickEvent"
       >
         <vxe-column type="seq" width="60"></vxe-column>
-        <vxe-column field="name" title="Name"></vxe-column>
-        <vxe-column field="sex" title="Sex" :formatter="formatterSex"></vxe-column>
-        <vxe-column field="age" title="Age"></vxe-column>
-        <vxe-column field="address" title="Address" show-overflow></vxe-column>
-        <vxe-column title="操作" width="100" show-overflow>
+        <vxe-column field="itemCode" title="租户参数"></vxe-column>
+        <!-- <vxe-column field="sex" title="Sex" :formatter="formatterSex"></vxe-column> -->
+        <vxe-column field="remark" title="备注"></vxe-column>
+        <vxe-column title="操作" width="120" show-overflow>
           <template #default="{ row }">
             <vxe-button type="text" icon="vxe-icon-edit" @click="editEvent(row)"></vxe-button>
             <vxe-button type="text" icon="vxe-icon-delete" @click="removeEvent(row)"></vxe-button>
           </template>
         </vxe-column>
       </vxe-table>
+      <vxe-modal
+        v-model="showEdit"
+        :title="selectRow ? '编辑&保存' : '新增&保存'"
+        width="800"
+        min-width="600"
+        min-height="300"
+        :loading="submitLoading"
+        resize
+        destroy-on-close
+      >
+        <template #default>
+          <vxe-form :data="formData" :rules="formRules" title-align="right" title-width="100" @submit="submitEvent">
+            <vxe-form-item field="itemCode" title="租户参数" :span="12" :item-render="{}">
+              <template #default="{ data }">
+                <vxe-input v-model="data.itemCode" placeholder="请输入租户参数"></vxe-input>
+              </template>
+            </vxe-form-item>
+            <vxe-form-item field="remark" title="备注" :span="12" :item-render="{}">
+              <template #default="{ data }">
+                <vxe-input v-model="data.remark" placeholder="请输入备注"></vxe-input>
+              </template>
+            </vxe-form-item>
+            <vxe-form-item align="center" title-align="left" :span="24">
+              <template #default>
+                <vxe-button type="submit">提交</vxe-button>
+                <vxe-button type="reset">重置</vxe-button>
+              </template>
+            </vxe-form-item>
+          </vxe-form>
+        </template>
+      </vxe-modal>
     </a-spin>
   </a-modal>
 </template>
 
 <script>
-import { DJYTenantParamGetParamItem, DJYTenantParamEdit } from '@/api/modular/main/DJYTenantParam'
+import {
+  DJYTenantParamGetParamItem,
+  DJYTenantParamAddParamItem,
+  DJYTenantParamEditParamItem,
+  DJYTenantParamDeleteParamItem,
+  DJYTenantParamEdit
+} from '@/api/modular/main/DJYTenantParam'
 import { sysDictDataPage } from '@/api/modular/system/dictDataManage'
+import VXETable from 'vxe-table'
 export default {
   data() {
     return {
@@ -68,7 +105,20 @@ export default {
       confirmLoading: false,
       form: this.$form.createForm(this),
       data: {},
-      tableData: []
+      tableData: [],
+      showEdit: false,
+      submitLoading: false,
+      selectRow: null,
+      formRules: {
+        name: [
+          { required: true, message: '请输入名称' },
+          { min: 3, max: 5, message: '长度在 3 到 5 个字符' }
+        ],
+        nickname: [{ required: true, message: '请输入昵称' }],
+        sex: [{ required: true, message: '请选择性别' }]
+      },
+      RecordData: {},
+      formData: {}
     }
   },
   mounted() {
@@ -78,14 +128,56 @@ export default {
     // })
   },
   methods: {
-    async insertEvent(row) {
+    submitEvent() {
+      this.submitLoading = true
+      if (this.selectRow) {
+        DJYTenantParamEditParamItem({ paraCode: this.RecordData.paraCode, ...this.formData }).then(res => {
+          console.log(res)
+          const $table = this.$refs.xTable
+          this.submitLoading = false
+          this.showEdit = false
+          VXETable.modal.message({ content: '保存成功', status: 'success' })
+          Object.assign(this.selectRow, this.formData)
+        })
+      } else {
+        DJYTenantParamAddParamItem({ paraCode: this.RecordData.paraCode, ...this.formData }).then(res => {
+          console.log(res)
+          const $table = this.$refs.xTable
+          this.submitLoading = false
+          this.showEdit = false
+          VXETable.modal.message({ content: '新增成功', status: 'success' })
+          $table.insert(this.formData)
+        })
+      }
+    },
+    cellDBLClickEvent({ row }) {
+      this.editEvent(row)
+    },
+    editEvent(row) {
+      this.formData = { ...row }
+      this.selectRow = row
+      this.showEdit = true
+    },
+    async removeEvent(row) {
+      const type = await VXETable.modal.confirm('您确定要删除该数据?')
       const $table = this.$refs.xTable
-      const record = {
+      if (type === 'confirm') {
+        console.log(row)
+        DJYTenantParamDeleteParamItem({ id: row.id }).then(() => {
+          $table.remove(row)
+          VXETable.modal.message({ content: '删除成功', status: 'success' })
+        })
+      }
+    },
+    insertEvent() {
+      this.formData = {
+        paraCode: this.RecordData.paraCode,
+        itemCode: '',
         itemName: '',
         remark: ''
       }
-      const { row: newRow } = await $table.insertAt(record, row)
-      await $table.setActiveCell(newRow, 'name')
+      this.selectRow = null
+      this.showEdit = true
     },
     editRowEvent(row) {
       const $table = this.$refs.xTable
@@ -110,22 +202,13 @@ export default {
     },
     // 初始化方法
     edit(record) {
-      this.data = record
-      console.log(record)
+      this.RecordData = record
+      console.log(this.RecordData)
+      // console.log(record)
       DJYTenantParamGetParamItem({ paraCode: record.paraCode }).then(res => {
         this.tableData = res.data
       })
       this.visible = true
-      // const typeOption = this.$options
-      // this.typeData = typeOption.filters['dictData']('edi_type')
-      // setTimeout(() => {
-      //   this.form.setFieldsValue({
-      //     paraName: record.paraName,
-      //     paraCode: record.paraCode,
-      //     remark: record.remark
-      //   })
-      //   console.log(this.form.getFieldsValue())
-      // }, 100)
     },
     handleSubmit() {
       const {