历史记录

src/components/DrawerHistory/index.vue

@@ -6,33 +6,6 @@
   >
     <div class="pa-3" v-loading="startLoading">
       <slot name="panel" :item="items"></slot>
-      <!-- <el-divider content-position="left">规则配置</el-divider>
-      <m-card
-        v-for="(item, index) in items"
-        :key="index"
-        class="mb-3"
-      >
-        <div
-        v-for="(item, index) in items"
-        :key="index"
-
-        >
-          <slot name="panel" :item="item"></slot>
-
-      <el-divider content-position="left"></el-divider>
-
-        </div>
-      </m-card> -->
-      <!-- <el-timeline>
-        <el-timeline-item
-          v-for="(item, index) in items"
-          :key="index"
-          :timestamp="item[createDate]"
-          placement="top"
-        >
-
-        </el-timeline-item>
-      </el-timeline> -->
       <no-more v-if="total === items.length"></no-more>
       <div v-else class="text-center my-3">
         <m-button text type="primary" :loading="loading" @click="onMore">查看更多</m-button>

src/views/salary/solution/components/solutionDetails.vue

@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <el-descriptions class="margin-top" :column="1" border>
+      <el-descriptions-item
+        v-for="header in columnHeaders"
+        :key="header.prop"
+      >
+        <template slot="label">{{ header.name }}</template>
+        <template v-if="header.prop === 'postNames'">
+          <span>{{ itemData[header.prop] && itemData[header.prop].join('、') }}</span>
+        </template>
+        <template v-else>
+          {{ itemData[header.prop] }}
+        </template>
+      </el-descriptions-item>
+    </el-descriptions>
+    <el-divider content-position="left">参数及公式</el-divider>
+    <m-card
+      v-for="item in rules"
+      :key="item.category"
+      shadow="never"
+    >
+      <template #header>
+        {{ item.category }}
+      </template>
+      <el-form label-width="150px">
+        <el-form-item
+          v-for="(calculateConfiguration, index) in item.calculateConfigurations"
+          :key="index"
+          :label="calculateConfiguration.name"
+        >
+          <template v-if="calculateConfiguration.valueCategory === 0">
+            <el-tag>{{ calculateConfiguration.value }}</el-tag>
+          </template>
+          <template v-else>
+            <m-table
+              clearHeader
+              shadow="never"
+              :headers="[
+                { label: '名称', prop: 'name' },
+                { label: '值', prop: 'value' }
+              ]"
+              :items="calculateConfiguration.value"
+            >
+            </m-table>
+          </template>
+        </el-form-item>
+        <el-form-item label="计算公式">
+          <m-card shadow="never">
+            <div v-html="item.calculateFormulas?.[0]?.content"></div>
+          </m-card>
+        </el-form-item>
+      </el-form>
+    </m-card>
+    <el-empty v-if="rules.length === 0"></el-empty>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'solutionDetails',
+  props: {
+    itemData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+
+      activeNames: null,
+      columnHeaders: [
+        { name: '方案名称', prop: 'title' },
+        { name: '方案描述', prop: 'tag' },
+        { name: '绩效机构', prop: 'organizationName' },
+        { name: '绩效职务', prop: 'postNames' }
+      ]
+    }
+  },
+  computed: {
+    rules () {
+      return this.itemData.performanceSolutionDetailRespCategoryVos || []
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/salary/solution/index.vue

@@ -10,45 +10,35 @@
         <component :is="item.component" :ref="item.name" :label="item.label" @hook:mounted="onComponentMounted" @history="onHistory"></component>
       </el-tab-pane>
     </el-tabs>
-    <DrawerHistory ref="drawerHistoryRefs" :get-page="getPage">
-      <template #panel="{ item }">
-        <el-form label-position="right" class="m-form" label-width="100px">
-          <el-form-item label="方案名称">
-            <el-tag>{{ itemData.title }}</el-tag>
-          </el-form-item>
-          <el-form-item label="方案描述">
-            <div>{{ itemData.tag }}</div>
-          </el-form-item>
-          <el-form-item label="规则配置">
-            <m-card class="mb-3" v-if="item.length">
-              <el-form label-position="right" class="m-form" label-width="200px">
-                <el-form-item v-for="_item in item" :key="_item.performanceSolutionId + _item.calculateConfigurationId" :label="_item.name">
-                  <el-tag>{{ _item.value }}</el-tag>
-                </el-form-item>
-              </el-form>
-            </m-card>
-          </el-form-item>
-        </el-form>
-      </template>
-    </DrawerHistory>
+    <el-drawer
+      :title="itemData.title"
+      :visible.sync="show"
+      direction="rtl"
+    >
+      <div class="pa-3">
+        <SolutionDetails v-if="loading" :item-data="itemData"></SolutionDetails>
+      </div>
+    </el-drawer>
   </div>
 </template>
 
 <script>
-import DrawerHistory from '@/components/DrawerHistory'
 import {
   getSolutionDetails
 } from '@/api/salary'
+import SolutionDetails from './components/solutionDetails.vue'
 export default {
   name: 'salary-solution',
   components: {
-    DrawerHistory
+    SolutionDetails
   },
   data () {
     return {
       activeName: '',
       items: [],
-      itemData: {}
+      itemData: {},
+      show: false,
+      loading: false
     }
   },
   created () {
@@ -77,19 +67,32 @@ export default {
         this.$refs[this.activeName] && this.$refs[this.activeName][0].onInit()
       })
     },
-    onHistory (row) {
-      this.itemData = row
-      this.$refs.drawerHistoryRefs.open(`${row.title} 历史记录`)
-    },
-    async getPage () {
-      return new Promise((resolve, reject) => {
-        getSolutionDetails({ performanceSolutionId: this.itemData.performanceSolutionId }).then(({ data }) => {
-          resolve({
-            data: data.calculateConfigurations,
-            total: data.calculateConfigurations.length
+    async onHistory ({ performanceSolutionId }) {
+      this.show = true
+      this.loading = true
+      try {
+        const { data } = await getSolutionDetails({ performanceSolutionId })
+        const { performanceSolutionDetailRespCategoryVos, ...obj } = data
+        const resolveData = {
+          ...obj,
+          performanceSolutionDetailRespCategoryVos: performanceSolutionDetailRespCategoryVos.map(e => {
+            e.calculateConfigurations = e.calculateConfigurations.map(item => {
+              if (item.valueCategory !== 0) {
+                item.value = JSON.parse(item.value)
+                return item
+              }
+              return item
+            })
+            return e
           })
-        }).catch(reject)
-      })
+        }
+        this.itemData = {
+          ...resolveData.entity,
+          ...resolveData
+        }
+      } catch (error) {
+        this.$message.error(error)
+      }
     }
   }
 }

src/views/salary/solution/salarySolution/salarySolutionDetails.vue

@@ -1,6 +1,7 @@
 <template>
   <m-dialog title="规则详情" ref="dialog">
-    <el-descriptions class="margin-top" :column="1" border>
+    <SolutionDetails :item-data="itemData"></SolutionDetails>
+    <!-- <el-descriptions class="margin-top" :column="1" border>
       <el-descriptions-item
         v-for="header in columnHeaders"
         :key="header.prop"
@@ -51,34 +52,38 @@
           </m-card>
         </el-form-item>
       </el-form>
-    </m-card>
+    </m-card> -->
   </m-dialog>
 </template>
 
 <script>
+import SolutionDetails from '../components/solutionDetails.vue'
 import {
   getSolutionDetails
 } from '@/api/salary'
 export default {
   name: 'salarySolutionDetails',
+  components: {
+    SolutionDetails
+  },
   data () {
     return {
-      activeNames: null,
+      // activeNames: null,
+      // columnHeaders: [
+      //   { name: '方案名称', prop: 'title' },
+      //   { name: '方案描述', prop: 'tag' },
+      //   { name: '绩效机构', prop: 'organizationName' },
+      //   { name: '绩效职务', prop: 'postNames' }
+      // ],
       loading: false,
-      columnHeaders: [
-        { name: '方案名称', prop: 'title' },
-        { name: '方案描述', prop: 'tag' },
-        { name: '绩效机构', prop: 'organizationName' },
-        { name: '绩效职务', prop: 'postNames' }
-      ],
       itemData: {}
     }
   },
-  computed: {
-    rules () {
-      return this.itemData.performanceSolutionDetailRespCategoryVos || []
-    }
-  },
+  // computed: {
+  //   rules () {
+  //     return this.itemData.performanceSolutionDetailRespCategoryVos || []
+  //   }
+  // },
   methods: {
     async open (item) {
       this.$refs.dialog.open()

src/views/salary/solution/salarySolution/salarySolutionHistory.vue

@@ -1,6 +1,6 @@
 <template>
   <m-dialog ref="dialog" :title="title + ' 历史记录'">
-    <ListTemplate ref="listTemplateRefs" history :show-search="false" shadow="never" :uuid="uuid">
+    <ListTemplate ref="listTemplateRefs" history :show-search="false" shadow="never" :uuid="uuid" clearHeader>
       <template #actions="{ row }">
         <slot name="actions" :row="row"></slot>
       </template>

src/views/welfare/index.vue

@@ -1,116 +0,0 @@
-<template>
-  <div class="white pa-3">
-    <el-tabs v-model="activeName" @tab-click="handleClick">
-      <el-tab-pane
-        v-for="item in items"
-        :key="item.name"
-        :label="item.label"
-        :name="item.name"
-      >
-        <component :is="item.component" :ref="item.name" :label="item.label" @hook:mounted="onComponentMounted" @history="onHistory"></component>
-      </el-tab-pane>
-    </el-tabs>
-    <DrawerHistory ref="drawerHistoryRefs" :get-page="getPage">
-      <template #panel="{ item }">
-        <el-form label-position="right" class="m-form" label-width="100px">
-          <el-form-item label="福利名称">
-            <el-tag>{{ itemData.subsidyName }}</el-tag>
-          </el-form-item>
-          <el-form-item label="创建时间">
-            <el-tag>{{ itemData.createDate }}</el-tag>
-          </el-form-item>
-          <el-form-item label="规则配置">
-            <m-card
-              v-for="_item in item"
-              :key="_item.subsidyId"
-              class="mb-3"
-            >
-              <el-form label-position="right" class="m-form" label-width="100px">
-                <el-form-item label="配置机构">
-                  <div>
-                    <el-tag v-for="(_name, i) in _item.subsidyOrganizationNames" :key="i" type="primary" class="mr-3">
-                      {{ _name }}
-                    </el-tag>
-                  </div>
-                </el-form-item>
-                <el-form-item label="福利薪资">
-                  <el-tag type="primary">{{ _item.subsidySalary }}</el-tag>
-                </el-form-item>
-                <el-form-item label="描述">
-                  <span>{{ _item.subsidyCheck }}</span>
-                </el-form-item>
-              </el-form>
-            </m-card>
-          </el-form-item>
-        </el-form>
-      </template>
-    </DrawerHistory>
-  </div>
-</template>
-
-<script>
-import DrawerHistory from '@/components/DrawerHistory'
-import {
-  getWelfareDetail
-} from '@/api/welfare'
-export default {
-  name: 'human-resources-welfare',
-  components: {
-    DrawerHistory
-  },
-  data () {
-    return {
-      activeName: '',
-      items: [],
-      itemData: {}
-    }
-  },
-  created () {
-    this.items = this.$route.meta.roles.filter(e => e.hidden === 1).sort((a, b) => a.sort - b.sort).map(e => {
-      return {
-        name: e.name,
-        label: e.label,
-        component: () => import(`./${e.component}/index.vue`)
-      }
-    })
-    if (this.$route.query.name) {
-      this.activeName = this.$route.query.name
-    } else {
-      this.activeName = this.items[0].name
-    }
-  },
-  methods: {
-    onComponentMounted () {
-      this.$nextTick(() => {
-        this.$refs[this.activeName][0].onInit()
-      })
-    },
-    handleClick () {
-      this.$router.push(`${this.$route.path}?name=${this.activeName}`)
-      this.$nextTick(() => {
-        this.$refs[this.activeName][0].onInit()
-      })
-    },
-    onHistory (row) {
-      this.itemData = row
-      this.$refs.drawerHistoryRefs.open(`${row.subsidyName} 历史记录`)
-    },
-    async getPage () {
-      return new Promise((resolve, reject) => {
-        getWelfareDetail({ subsidyId: this.itemData.subsidyId }).then(({ data }) => {
-          resolve({
-            data: data.subsidyItems,
-            total: data.subsidyItems.length
-          })
-        }).catch(reject)
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-::v-deep .el-tabs__content  {
-  overflow: visible !important;
-}
-</style>

src/views/welfare/welfareRules/historyDialog.vue

@@ -1,6 +1,6 @@
 <template>
   <m-dialog ref="dialog" :title="title + ' 历史记录'">
-    <ListTemplate ref="listTemplateRefs" history :show-search="false" shadow="never" :uuid="uuid">
+    <ListTemplate ref="listTemplateRefs" history :show-search="false" shadow="never" :uuid="uuid" clearHeader>
       <template #actions="{ row }">
         <slot name="actions" :row="row"></slot>
       </template>

src/views/welfare/welfareRules/index.vue

@@ -15,16 +15,53 @@
     <WelfareRules ref="welfareRulesRefs" @refresh="onInit"></WelfareRules>
     <HistoryDialog ref="historyDialogRefs">
       <template #actions="{ row }">
-        <m-button type="primary" text @click="$emit('history', row)" size="small">查看配置规则</m-button>
+        <m-button type="primary" text @click="onClick(row)" size="small">查看配置规则</m-button>
       </template>
     </HistoryDialog>
+    <DrawerHistory ref="drawerHistoryRefs" :get-page="getPage">
+      <template #panel="{ item }">
+        <el-form label-position="right" class="m-form" label-width="100px">
+          <el-form-item label="福利名称">
+            <el-tag>{{ itemData.subsidyName }}</el-tag>
+          </el-form-item>
+          <el-form-item label="创建时间">
+            <el-tag>{{ itemData.createDate }}</el-tag>
+          </el-form-item>
+          <el-form-item label="规则配置">
+            <m-card
+              v-for="_item in item"
+              :key="_item.subsidyId"
+              class="mb-3"
+            >
+              <el-form label-position="right" class="m-form" label-width="100px">
+                <el-form-item label="配置机构">
+                  <div>
+                    <el-tag v-for="(_name, i) in _item.subsidyOrganizationNames" :key="i" type="primary" class="mr-3">
+                      {{ _name }}
+                    </el-tag>
+                  </div>
+                </el-form-item>
+                <el-form-item label="福利薪资">
+                  <el-tag type="primary">{{ _item.subsidySalary }}</el-tag>
+                </el-form-item>
+                <el-form-item label="描述">
+                  <span>{{ _item.subsidyCheck }}</span>
+                </el-form-item>
+              </el-form>
+            </m-card>
+          </el-form-item>
+        </el-form>
+      </template>
+    </DrawerHistory>
   </div>
 </template>
 
 <script>
+import DrawerHistory from '@/components/DrawerHistory'
 import ListTemplate from '../components/ListTemplate.vue'
 import {
-  deleteWelfare
+  deleteWelfare,
+  getWelfareDetail
 } from '@/api/welfare'
 import WelfareEdit from './welfareEdit.vue'
 import WelfareRules from './welfareRules'
@@ -34,9 +71,15 @@ export default {
   components: {
     ListTemplate,
     WelfareEdit,
+    DrawerHistory,
     WelfareRules,
     HistoryDialog
   },
+  data () {
+    return {
+      itemData: {}
+    }
+  },
   methods: {
     onInit () {
       this.$refs.listTemplateRefs.onInit()
@@ -50,6 +93,10 @@ export default {
     onEditRules (item) {
       this.$refs.welfareRulesRefs.open(item)
     },
+    onClick (row) {
+      this.itemData = row
+      this.$refs.drawerHistoryRefs.open(`${row.subsidyName} 历史记录`)
+    },
     onDelete (item) {
       this.$confirm(`确定删除${item.subsidyName}吗？`, '提示').then(async () => {
         try {
@@ -63,6 +110,16 @@ export default {
     },
     onHistory (row) {
       this.$refs.historyDialogRefs.open(row.uuid, row.subsidyName)
+    },
+    async getPage () {
+      return new Promise((resolve, reject) => {
+        getWelfareDetail({ subsidyId: this.itemData.subsidyId }).then(({ data }) => {
+          resolve({
+            data: data.subsidyItems,
+            total: data.subsidyItems.length
+          })
+        }).catch(reject)
+      })
     }
   }
 }