福利规则管理：编辑与规则配置合并

src/views/welfare/welfareRules/index.vue

@@ -6,19 +6,21 @@
       </template>
       <template #actions="{ row }">
         <m-button text type="primary" size="small" @click="onEdit(row)">编辑</m-button>
-        <m-button text type="primary" size="small" @click="onEditRules(row)">规则配置</m-button>
+        <!-- <m-button text type="primary" size="small" @click="onEditRules(row)">规则配置</m-button> -->
         <m-button text type="primary" size="small" @click="onHistory(row)">历史记录</m-button>
         <m-button text type="danger" size="small" @click="onDelete(row)">删除</m-button>
       </template>
     </ListTemplate>
-    <WelfareEdit ref="welfareEditRefs" @refresh="onInit"></WelfareEdit>
-    <WelfareRules ref="welfareRulesRefs" @refresh="onInit"></WelfareRules>
+    <!-- <WelfareEdit ref="welfareEditRefs" @refresh="onInit"></WelfareEdit>
+    <WelfareRules ref="welfareRulesRefs" @refresh="onInit"></WelfareRules> -->
+
+    <WelfareForm ref="welfareFormRefs" @refresh="onInit"></WelfareForm>
     <HistoryDialog ref="historyDialogRefs">
       <template #actions="{ row }">
         <m-button type="primary" text @click="onClick(row)" size="small">查看配置规则</m-button>
       </template>
     </HistoryDialog>
-    <DrawerHistory ref="drawerHistoryRefs" :get-page="getPage">
+    <DrawerHistory ref="drawerHistoryRefs" size="50%" :get-page="getPage">
       <template #panel="{ item }">
         <el-form label-position="right" class="m-form" label-width="100px">
           <el-form-item label="福利名称">
@@ -63,16 +65,18 @@ import {
   deleteWelfare,
   getWelfareDetail
 } from '@/api/welfare'
-import WelfareEdit from './welfareEdit.vue'
-import WelfareRules from './welfareRules'
+import WelfareForm from './welfareForm.vue'
+// import WelfareEdit from './welfareEdit.vue'
+// import WelfareRules from './welfareRules'
 import HistoryDialog from './historyDialog'
 export default {
   name: 'human-resources-welfare-list',
   components: {
     ListTemplate,
-    WelfareEdit,
+    // WelfareEdit,
+    WelfareForm,
     DrawerHistory,
-    WelfareRules,
+    // WelfareRules,
     HistoryDialog
   },
   data () {
@@ -85,10 +89,11 @@ export default {
       this.$refs.listTemplateRefs.onInit()
     },
     onEdit (item) {
-      this.$refs.welfareEditRefs.open(item)
+      // this.$refs.welfareEditRefs.open(item)
+      this.$refs.welfareFormRefs.open(item)
     },
     onAdd () {
-      this.$refs.welfareEditRefs.open()
+      this.$refs.welfareFormRefs.open()
     },
     onEditRules (item) {
       this.$refs.welfareRulesRefs.open(item)

src/views/welfare/welfareRules/welfareForm.vue

@@ -0,0 +1,187 @@
+<template>
+  <m-dialog ref="dialog" :title="dialogTitle" width="1200px" @sure="onSure">
+    <el-form ref="form" :model="formQuery" v-loading="loading" label-position="right" label-width="100px">
+      <!-- 福利基本信息 -->
+      <el-form-item label="福利名称" prop="subsidyName" :rules="{ required: true, message: '请输入福利名称', trigger: 'blur' }">
+        <el-input
+          v-model="formQuery.subsidyName"
+          placeholder="请输入福利名称"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="福利描述" prop="subsidyTag">
+        <el-input
+          v-model="formQuery.subsidyTag"
+          placeholder="请输入福利描述"
+        ></el-input>
+      </el-form-item>
+
+      <!-- 福利规则配置 -->
+      <el-form-item label="福利配置">
+        <m-table
+          shadow="naver"
+          clearHeader
+          :items="formQuery.items"
+          :headers="headers"
+        >
+          <div class="text-center mt-3">
+            <m-button icon="el-icon-plus" type="orange" size="small" @click="onAdd">添加一行</m-button>
+          </div>
+          <template #subsidySalary="scope">
+            <el-form-item
+              :prop="`items.${scope.$index}.subsidySalary`"
+              :rules="{ required: true, message: '请输入福利薪资', trigger: 'blur' }"
+            >
+              <el-input-number
+                v-model="formQuery.items[scope.$index].subsidySalary"
+                placeholder="福利薪资"
+              ></el-input-number>
+            </el-form-item>
+          </template>
+          <template #subsidyCheck="scope">
+            <el-form-item
+              :prop="`items.${scope.$index}.subsidyCheck`"
+              :rules="{ required: true, message: '请输入福利条件描述', trigger: 'blur' }"
+            >
+              <el-input
+                v-model="formQuery.items[scope.$index].subsidyCheck"
+                placeholder="福利条件描述"
+                type="textarea"
+                :autosize="{ minRows: 1.335, maxRows: 4}"
+              ></el-input>
+            </el-form-item>
+          </template>
+          <template #actions="scope">
+            <m-button size="small" text type="danger" @click="onDelete(scope)">移除</m-button>
+          </template>
+        </m-table>
+      </el-form-item>
+
+    </el-form>
+  </m-dialog>
+</template>
+
+<script>
+import {
+  saveWelfare,
+  getWelfareDetail
+} from '@/api/welfare'
+
+export default {
+  name: 'welfare-form',
+  data () {
+    return {
+      formQuery: {
+        subsidyName: null,
+        subsidyTag: null,
+        items: [
+          {
+            // subsidyOrganizationNames: [],
+            // subsidyOrganizationNos: [],
+            subsidySalary: null,
+            subsidyCheck: null
+          }
+        ]
+      },
+      headers: [
+        // { label: '机构名称', prop: 'subsidyOrganizationNos' },
+        { label: '福利薪资', prop: 'subsidySalary', width: 200 },
+        { label: '福利条件描述', prop: 'subsidyCheck', width: 550 },
+        { label: '操作', prop: 'actions' }
+      ],
+      itemData: {},
+      loading: false,
+      isEdit: false
+    }
+  },
+  computed: {
+    dialogTitle () {
+      return this.isEdit ? '编辑' : '新增'
+    }
+  },
+  methods: {
+    async open (item) {
+      this.isEdit = !!item
+      this.$refs.dialog.open()
+
+      if (this.isEdit) {
+        // 编辑模式：加载现有数据
+        this.formQuery.subsidyName = item.subsidyName
+        this.formQuery.subsidyTag = item.subsidyTag
+        this.loading = true
+        try {
+          const { data } = await getWelfareDetail({
+            subsidyId: item.subsidyId
+          })
+          this.itemData = data
+          if (!data.subsidyItems || !data.subsidyItems?.length) return
+          this.formQuery.items = data.subsidyItems.map(e => {
+            return {
+              subsidySalary: e.subsidySalary,
+              subsidyCheck: e.subsidyCheck
+            }
+          })
+        } catch (error) {
+          this.$message.error(error)
+        } finally {
+          this.loading = false
+        }
+      } else {
+        // 新增模式：重置表单
+        this.formQuery.subsidyName = null
+        this.formQuery.subsidyTag = null
+        this.formQuery.items = [
+          {
+            // subsidyOrganizationNames: [],
+            // subsidyOrganizationNos: [],
+            subsidySalary: null,
+            subsidyCheck: null
+          }
+        ]
+        this.itemData = {}
+      }
+    },
+    onAdd () {
+      this.formQuery.items.push({
+        // subsidyOrganizationNames: [],
+        // subsidyOrganizationNos: [],
+        subsidySalary: 0,
+        subsidyCheck: null
+      })
+    },
+    onDelete (scope) {
+      this.formQuery.items.splice(scope.$index, 1)
+    },
+    // onChange (v, item) {
+    //   const data = this.$refs['cascader' + item.$index].getCheckedNodes(true)
+    //   this.formQuery.items[item.$index].subsidyOrganizationNames = data.map(e => e.data.organizationName)
+    // },
+    onSure () {
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          const query = {
+            subsidy: {
+              subsidyName: this.formQuery.subsidyName,
+              subsidyTag: this.formQuery.subsidyTag
+            },
+            subsidyItems: this.formQuery.items
+          }
+          if (this.isEdit) query.subsidy.subsidyId = this.itemData.subsidy?.subsidyId
+
+          try {
+            await saveWelfare(query)
+            this.$refs.dialog.close()
+            this.$emit('refresh')
+            this.$message.success(this.dialogTitle + '成功')
+          } catch (error) {
+            this.$message.error(error)
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>