分步骤执行

src/styles/orangeTheme.scss

@@ -94,12 +94,12 @@ $LIGHTEN_BASE: 1%;
         background-color: #ffffff;
         border-color: #e4e7ed;
         color: #c0c4cc;
-        &:hover,
-      &:focus {
-        background-color: lighten($orange-color, 42%); // 非常浅的橙色
-        border-color: lighten($orange-color, 20%);    // 浅橙色边框
-        color: $orange-color;                         // 文字变橙色
-      }
+        // &:hover,
+        // &:focus {
+        //   background-color: lighten($orange-color, 42%); // 非常浅的橙色
+        //   border-color: lighten($orange-color, 20%);    // 浅橙色边框
+        //   color: $orange-color;                         // 文字变橙色
+        // }
       }
 
       // Plain 模式（镂空按钮）
@@ -128,12 +128,12 @@ $LIGHTEN_BASE: 1%;
           background-color: #ffffff;
           border-color: #e4e7ed;
           color: #c0c4cc;
-          &:hover,
-          &:focus {
-            background-color: #ffffff;
-            border-color: #e4e7ed;
-            color: #c0c4cc;
-          }
+          // &:hover,
+          // &:focus {
+          //   background-color: #ffffff;
+          //   border-color: #e4e7ed;
+          //   color: #c0c4cc;
+          // }
         }
       }
     }
@@ -194,12 +194,12 @@ $LIGHTEN_BASE: 1%;
           background-color: lighten($color, 45%);
           border-color: lighten($color, 30%);
           color: lighten($color, 20%);
-          &:hover
-          &:focus {
-            background-color: lighten($color, 45%);
-            border-color: lighten($color, 30%);
-            color: lighten($color, 20%);
-          }
+          // &:hover
+          // &:focus {
+          //   background-color: lighten($color, 45%);
+          //   border-color: lighten($color, 30%);
+          //   color: lighten($color, 20%);
+          // }
         }
       }
     }

src/views/sandbox/index.vue

@@ -3,31 +3,41 @@
     <m-search class="mb-3" :items="searchItems" v-model="searchValues" @search="onSearch"></m-search>
     <m-table
       v-loading="loading"
-      card-title="测算规则"
-      :items="items"
+      shadow="never"
+      card-title="测算结果"
       :headers="headers"
-      :total="total"
-      :page-size="pageInfo.size"
-      :page-current="pageInfo.current"
-      v-bind="$attrs"
-      @page-change="onPageChange"
+      :items="items"
       @sort-change="onSortChange"
+      @page-change="onPageChange"
+      @selection-change="onSelectionChange"
     >
+      <template #card-tools>
+        <m-button type="orange" @click="onAdd" icon="el-icon-plus">新增测算</m-button>
+        <m-button type="success" @click="onComparison" icon="mdi mdi-arrange-send-to-back">已选项对比</m-button>
+      </template>
       <template #actions="{ row }">
-        <m-button text type="primary" size="small" @click="onOpen('sandboxListRefs', row)">规则版本选择</m-button>
+        <m-button text type="primary" @click="onDetails(row)">系数明细</m-button>
+        <m-button text type="primary" @click="onResult(row)">查看结果</m-button>
+        <m-button text type="success" @click="onIssue(row)">发布</m-button>
       </template>
     </m-table>
-    <SandboxList ref="sandboxListRefs"></SandboxList>
+    <SandboxResult ref="sandboxResultRefs"></SandboxResult>
+    <SandboxDetails :only-param="true" ref="sandboxDetailsRefs"></SandboxDetails>
+    <SandboxComparison ref="sandboxComparisonRefs"></SandboxComparison>
+    <SandboxAdd ref="sandboxAddRefs"></SandboxAdd>
   </div>
 </template>
 
 <script>
+import SandboxResult from './sandboxResult.vue'
+import SandboxDetails from './sandboxDetails.vue'
+import SandboxComparison from './sandboxComparison.vue'
+import SandboxAdd from './sandboxAdd.vue'
 import {
-  getSolutionPage
+  sendSalaryRelease
 } from '@/api/salary'
-import SandboxList from './sandboxList.vue'
 export default {
-  name: 'salary-solution-list',
+  name: 'sandbox-history',
   props: {
     permission: {
       type: Array,
@@ -35,7 +45,10 @@ export default {
     }
   },
   components: {
-    SandboxList
+    SandboxResult,
+    SandboxDetails,
+    SandboxComparison,
+    SandboxAdd
   },
   data () {
     return {
@@ -48,27 +61,37 @@ export default {
           options: {
             placeholder: '请输入规则名称'
           }
+        },
+        {
+          label: '时间',
+          type: 'datePicker',
+          prop: 'time',
+          options: {
+            rangeSeparator: '至',
+            startPlaceholder: '开始时间',
+            endPlaceholder: '结束时间',
+            valueFormat: 'yyyy-MM-dd',
+            type: 'daterange'
+          }
         }
-        // {
-        //   label: '时间',
-        //   type: 'datePicker',
-        //   prop: 'time',
-        //   options: {
-        //     rangeSeparator: '至',
-        //     startPlaceholder: '开始时间',
-        //     endPlaceholder: '结束时间',
-        //     valueFormat: 'yyyy-MM-dd',
-        //     type: 'daterange'
-        //   }
-        // }
       ],
       searchValues: {},
-      items: [],
+      select: [],
       headers: [
-        { label: '名称', prop: 'title' },
-        { label: '描述', prop: 'tag' },
-        { label: '创建日期', prop: 'createDate' },
-        { label: '操作', prop: 'actions', width: 500, fixed: 'right' }
+        { type: 'selection', width: 55, prop: 'selection' },
+        { label: '规则名称', prop: 'name' },
+        { label: '绩效汇总', prop: 'performance' },
+        { label: '数据月份', prop: 'dataTime' },
+        { label: '测算时间', prop: 'time' },
+        { label: '操作', prop: 'actions' }
+      ],
+      items: [
+        { id: 0, time: '2020-01-01 12:00:00', name: '规则1', performance: '100', dataTime: '2020-01' },
+        { id: 1, time: '2020-01-01 12:00:00', name: '规则2', performance: '100', dataTime: '2020-01' },
+        { id: 2, time: '2020-01-01 12:00:00', name: '规则3' },
+        { id: 3, time: '2020-01-01 12:00:00', name: '规则4' },
+        { id: 4, time: '2020-01-01 12:00:00', name: '规则5' },
+        { id: 5, time: '2020-01-01 12:00:00', name: '规则6' }
       ],
       total: 0,
       orders: [{
@@ -81,34 +104,14 @@ export default {
       }
     }
   },
-  mounted () {
-    this.onInit()
-  },
+  // mounted () {
+  //   this.onInit()
+  // },
   methods: {
     async onInit () {
-      this.loading = true
-      // const { time, ...query } = this.searchValues
-      try {
-        const { data } = await getSolutionPage({
-          page: {
-            ...this.pageInfo,
-            orders: this.orders
-          },
-          entity: {
-            ...this.searchValues,
-            history: 0,
-            env: 0
-          }
-          // startDate: time?.[0],
-          // endDate: time?.[1]
-        })
-        this.items = data.records.map(e => e.entity)
-        this.total = data.total
-      } catch (error) {
-        this.$message.error(error)
-      } finally {
-        this.loading = false
-      }
+    },
+    onAdd () {
+      this.$refs.sandboxAddRefs.open()
     },
     onSearch () {
       this.pageInfo.current = 1
@@ -122,9 +125,35 @@ export default {
       this.orders = v
       this.onInit()
     },
-
-    onOpen (ref, item) {
-      this.$refs[ref]?.open && this.$refs[ref].open(item)
+    onDetails (item) {
+      this.$refs.sandboxDetailsRefs.open({
+        performanceSolutionId: '1940675479925174274'
+      })
+    },
+    onResult (item) {
+      this.$refs.sandboxResultRefs.open()
+    },
+    onSelectionChange (v) {
+      this.select = v.map(e => e.id)
+    },
+    onComparison () {
+      if (!this.select.length) {
+        this.$message.warning('请选择对比项')
+        return
+      }
+      this.$refs.sandboxComparisonRefs.open()
+    },
+    async onIssue ({ performanceSolutionId }) {
+      this.loading = true
+      try {
+        await sendSalaryRelease({ performanceSolutionId })
+        this.$message.success('发布成功')
+        this.onInit()
+      } catch (error) {
+        this.$message.error(error)
+      } finally {
+        this.loading = false
+      }
     }
   }
 }

src/views/sandbox/sandboxAdd.vue

@@ -0,0 +1,134 @@
+<template>
+  <m-dialog title="新增测算" ref="dialog" v-bind="$attrs" width="1200px">
+    <template #button-after>
+      <m-button :disabled="active === 0" @click="onPrev">上一步</m-button>
+      <m-button v-if="active === items.length - 1" type="success" @click="onIssue">发布</m-button>
+      <m-button v-else type="orange" @click="onNext">下一步</m-button>
+    </template>
+    <div style="min-height: 100px;">
+      <el-steps :active="active" finish-status="success">
+        <el-step
+          v-for="item in items"
+          :key="item.title"
+          :title="item.title"
+          :description="item.description ? item.subtitle + item.description : ''"
+        ></el-step>
+      </el-steps>
+    </div>
+    <SandboxRules v-show="active === 0" ref="sandboxRulesRefs" @row-click="assignDescription"></SandboxRules>
+    <SandboxList v-show="active === 1" ref="sandboxListRefs" @row-click="assignDescription"></SandboxList>
+    <SandboxParam v-show="active === 2" ref="sandboxParamRefs"></SandboxParam>
+    <SandboxDate v-show="active === 3" ref="sandboxDateRefs" @change="assignDescription"></SandboxDate>
+    <SandboxResultDetails v-show="active === 4" ref="sandboxResultDetailsRefs"></SandboxResultDetails>
+  </m-dialog>
+</template>
+
+<script>
+import SandboxRules from './sandboxRules.vue'
+import SandboxList from './sandboxList.vue'
+import SandboxParam from './sandboxParam.vue'
+import SandboxDate from './sandboxDate.vue'
+import SandboxResultDetails from './sandboxResultDetails.vue'
+import {
+  sendSalaryRelease
+} from '@/api/salary'
+export default {
+  name: 'sandboxAdd',
+  components: {
+    SandboxRules,
+    SandboxList,
+    SandboxParam,
+    SandboxDate,
+    SandboxResultDetails
+  },
+  data () {
+    return {
+      active: 0,
+      descriptionValues: {
+        0: {
+          name: null,
+          id: null,
+          ref: 'sandboxRulesRefs'
+        },
+        1: {
+          name: null,
+          id: null,
+          ref: 'sandboxListRefs'
+        },
+        2: {
+          name: null,
+          id: null,
+          ref: 'sandboxParamRefs'
+        },
+        3: {
+          name: null,
+          id: null,
+          ref: 'sandboxDateRefs'
+        },
+        4: {
+          name: null,
+          id: null,
+          ref: 'sandboxResultDetailsRefs'
+        }
+      }
+    }
+  },
+  computed: {
+    items () {
+      return [
+        { title: '点击表格选择规则', subtitle: '已选规则：', description: this.descriptionValues[0].name },
+        { title: '点击表格选择版本', subtitle: '已选版本：', description: this.descriptionValues[1].name },
+        { title: '系数导向', subtitle: '', description: '' },
+        { title: '数据日期', subtitle: '', description: '' },
+        { title: '计算结果', subtitle: '', description: '' }
+      ]
+    },
+    ref () {
+      return this.$refs[this.descriptionValues[this.active].ref]
+    }
+  },
+  methods: {
+    open () {
+      this.active = 0
+      this.$refs.dialog.open()
+    },
+    assignDescription (item) {
+      Object.assign(this.descriptionValues[this.active], {
+        name: item.name ?? null,
+        id: item.id ?? null
+      })
+    },
+    onPrev () {
+      if (this.active === 0) {
+        return
+      }
+      this.active--
+    },
+    onNext () {
+      if (this.active === this.items.length - 1) {
+        return
+      }
+      if (this.ref.validate && !this.ref.validate()) {
+        return
+      }
+      this.active++
+      this.ref.init && this.ref.init(this.descriptionValues[this.active - 1].id)
+    },
+    async onIssue () {
+      this.loading = true
+      try {
+        await sendSalaryRelease({ performanceSolutionId: this.descriptionValues[4].id })
+        this.$message.success('发布成功')
+      } catch (error) {
+        this.$message.error(error)
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/sandbox/sandboxCalculate.vue

@@ -1,59 +0,0 @@
-<template>
-  <m-dialog title="绩效测算" v-bind="$attrs" ref="dialog">
-    <div v-if="loading" style="height: 200px;" v-loading="loading"></div>
-    <el-result v-if="isSuccess" icon="success" title="测算完成" subTitle="点击查看测算结果">
-      <template slot="extra">
-        <el-button @click="onReset">重新测算</el-button>
-        <el-button type="orange" @click="onDetails">查看结果</el-button>
-      </template>
-    </el-result>
-    <SandboxResult ref="sandboxResultRefs" append-to-body>
-      <template #button>
-        <m-button type="orange" @click="$emit('issue', itemData)">发布</m-button>
-      </template>
-    </SandboxResult>
-  </m-dialog>
-</template>
-
-<script>
-import SandboxResult from './sandboxResult.vue'
-export default {
-  name: 'sandboxCalculate',
-  components: {
-    SandboxResult
-  },
-  data () {
-    return {
-      loading: false,
-      isSuccess: false,
-      itemData: {}
-    }
-  },
-  methods: {
-    async open (item, month) {
-      this.itemData = item
-      this.isSuccess = false
-      this.$refs.dialog.open()
-      this.onStart(month)
-    },
-    onStart (month) {
-      this.loading = true
-      setTimeout(() => {
-        this.loading = false
-        this.isSuccess = true
-      }, 3000)
-    },
-    onReset () {
-      // this.isSuccess = false
-      this.$refs.dialog.close()
-    },
-    onDetails () {
-      this.$refs.sandboxResultRefs.open()
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-
-</style>

src/views/sandbox/sandboxDate.vue

@@ -0,0 +1,45 @@
+<template>
+  <m-card shadow="never">
+    <div class="d-flex align-center flex-column pa-3">
+      <div class="pa-3">选择数据月份</div>
+      <el-date-picker
+        v-model="month"
+        type="month"
+        format="yyyy-MM"
+        valueFormat="yyyy-MM"
+        placeholder="选择数据月份"
+        @change="onChange"
+      >
+      </el-date-picker>
+    </div>
+  </m-card>
+</template>
+
+<script>
+export default {
+  name: 'SandboxDate',
+  data () {
+    return {
+      month: null
+    }
+  },
+  methods: {
+    validate () {
+      if (!this.month) {
+        this.$message.error('请选择数据月份')
+      }
+      return !!this.month
+    },
+    onChange () {
+      this.$emit('change', {
+        id: this.month,
+        name: this.month
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/sandbox/sandboxHistory.vue

@@ -1,93 +0,0 @@
-<template>
-  <m-dialog title="测算历史" v-bind="$attrs" ref="dialog" width="1200px">
-    <m-table
-      shadow="never"
-      clearHeader
-      :headers="headers"
-      :items="items"
-      @sort-change="onSortChange"
-      @page-change="onPageChange"
-      @selection-change="onSelectionChange"
-    >
-      <template #header>
-        <div class="text-right">
-          <m-button type="orange" @click="onComparison">已选项对比</m-button>
-        </div>
-      </template>
-      <template #actions="{ row }">
-        <m-button text type="primary" @click="onDetails(row)">系数明细</m-button>
-        <m-button text type="primary" @click="onResult(row)">查看结果</m-button>
-        <m-button text type="success" @click="$emit('issue', itemData)">发布</m-button>
-      </template>
-    </m-table>
-    <SandboxResult ref="sandboxResultRefs" append-to-body></SandboxResult>
-    <SandboxDetails :only-param="true" ref="sandboxDetailsRefs" append-to-body></SandboxDetails>
-    <SandboxComparison ref="sandboxComparisonRefs" append-to-body></SandboxComparison>
-  </m-dialog>
-</template>
-
-<script>
-import SandboxResult from './sandboxResult.vue'
-import SandboxDetails from './sandboxDetails.vue'
-import SandboxComparison from './sandboxComparison.vue'
-export default {
-  name: 'sandboxHistory',
-  components: {
-    SandboxResult,
-    SandboxDetails,
-    SandboxComparison
-  },
-  data () {
-    return {
-      select: [],
-      headers: [
-        { type: 'selection', width: 55, prop: 'selection' },
-        { label: '测算时间', prop: 'time' },
-        { label: '规则名称', prop: 'name' },
-        { label: '绩效汇总', prop: 'performance' },
-        { label: '数据月份', prop: 'dataTime' },
-        { label: '操作', prop: 'actions' }
-      ],
-      items: [
-        { id: 0, time: '2020-01-01 12:00:00', name: '规则1', performance: '100', dataTime: '2020-01' },
-        { id: 1, time: '2020-01-01 12:00:00', name: '规则2', performance: '100', dataTime: '2020-01' },
-        { id: 2, time: '2020-01-01 12:00:00', name: '规则3' },
-        { id: 3, time: '2020-01-01 12:00:00', name: '规则4' },
-        { id: 4, time: '2020-01-01 12:00:00', name: '规则5' },
-        { id: 5, time: '2020-01-01 12:00:00', name: '规则6' }
-      ],
-      itemData: {}
-    }
-  },
-  methods: {
-    open (item) {
-      this.itemData = item
-      this.$refs.dialog.open()
-    },
-    onSortChange () {},
-    onPageChange () {},
-    onDetails (item) {
-      this.$refs.sandboxDetailsRefs.open({
-        performanceSolutionId: '1940675479925174274'
-      })
-    },
-    onResult (item) {
-      this.$refs.sandboxResultRefs.open()
-    },
-    onSelectionChange (v) {
-      this.select = v.map(e => e.id)
-    },
-    onComparison () {
-      if (!this.select.length) {
-        this.$message.warning('请选择对比项')
-        return
-      }
-      this.$refs.sandboxComparisonRefs.open()
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-
-</style>

src/views/sandbox/sandboxList.vue

@@ -1,5 +1,6 @@
 <template>
-  <m-dialog title="规则版本选择" ref="dialog" width="1200px">
+  <div>
+    <m-search shadow="never" class="mb-3" :items="searchItems" v-model="searchValues" @search="onSearch"></m-search>
     <m-table
       shadow="never"
       v-loading="loading"
@@ -7,60 +8,42 @@
       :headers="headers"
       :items="items"
       :total="total"
+      highlight-current-row
       :page-size="pageInfo.size"
+      :class="{ error }"
       :page-current="pageInfo.current"
+      @current-change="onCurrentChange"
       @page-change="onPageChange"
       @sort-change="onSortChange"
     >
-      <!-- <template #testStatus="{ row }">
-        <el-tag size="small" :type="row.testStatus === 1 ? 'success' : 'info'">
-          {{ row.testStatus === 1 ? '已测算' : '未测算' }}
-        </el-tag>
-      </template> -->
       <template #actions="{ row }">
-        <m-button text type="primary" size="small" @click="onOpen('sandboxDetailsRefs', row)">查看规则</m-button>
-        <!-- <m-button text type="primary" size="small" @click="onOpen('sandboxParamRefs', row)">系数导向</m-button> -->
-        <!-- <m-button text type="success" size="small" @click="onOpen('sandboxCalculateRefs', row)">开始测算</m-button> -->
-        <!-- <m-button text type="primary" size="small" @click="onOpen('sandboxHistoryRefs', row)">测算历史</m-button> -->
-        <!-- <m-button text type="success" size="small" @click="onSend(row)">发布</m-button> -->
+        <m-button text type="primary" size="small" style="padding: 0;" @click="onOpen('sandboxDetailsRefs', row)">查看规则</m-button>
       </template>
     </m-table>
-    <SandboxDetails ref="sandboxDetailsRefs" append-to-body @sure="onOpen('sandboxParamRefs', $event)">
-      <template #button="{ row }">
-        <m-button type="orange" @click="onOpen('sandboxParamRefs', row)">系数导向</m-button>
-        <m-button type="orange" @click="onOpen('sandboxHistoryRefs', row)">测算历史</m-button>
-      </template>
-    </SandboxDetails>
-    <SandboxParam ref="sandboxParamRefs" append-to-body @refresh="getList" @issue="onIssue"></SandboxParam>
-    <SandboxHistory ref="sandboxHistoryRefs" append-to-body @issue="onIssue"></SandboxHistory>
+    <SandboxDetails ref="sandboxDetailsRefs" append-to-body @sure="onOpen('sandboxParamRefs', $event)"></SandboxDetails>
 
-  </m-dialog>
+  </div>
 </template>
 
 <script>
 import SandboxDetails from './sandboxDetails.vue'
-import SandboxParam from './sandboxParam.vue'
-import SandboxHistory from './sandboxHistory.vue'
 import {
-  getSolutionPage,
-  sendSalaryRelease
+  getSolutionPage
+  // sendSalaryRelease
 } from '@/api/salary'
 export default {
   name: 'sandboxList',
   components: {
-
-    SandboxDetails,
-    SandboxParam,
-    SandboxHistory
+    SandboxDetails
   },
   data () {
     return {
+      error: false,
       headers: [
-        { label: '名称', prop: 'title' },
+        { label: '版本号', prop: 'version' },
         { label: '修改说明', prop: 'versionTag' },
-        // { label: '是否已经测算', prop: 'testStatus', align: 'center' },
         { label: '创建日期', prop: 'createDate' },
-        { label: '操作', prop: 'actions', width: 400, fixed: 'right' }
+        { label: '操作', prop: 'actions' }
       ],
       items: [],
       loading: false,
@@ -71,22 +54,49 @@ export default {
       }],
       pageInfo: {
         current: 1,
-        size: 10
+        size: 5
       },
+      searchItems: [
+        {
+          label: '时间',
+          type: 'datePicker',
+          prop: 'time',
+          options: {
+            rangeSeparator: '至',
+            startPlaceholder: '开始时间',
+            endPlaceholder: '结束时间',
+            valueFormat: 'yyyy-MM-dd',
+            type: 'daterange'
+          }
+        }
+      ],
+      searchValues: {},
+      clickItem: null,
       uuid: null
     }
   },
   methods: {
-    open (item) {
-      this.$refs.dialog.open()
+    init (uuid) {
+      this.uuid = uuid
       this.pageInfo.current = 1
-      this.uuid = item.uuid
+      this.clickItem = null
+      this.searchValues = {}
       this.items = []
       this.total = 0
       this.getList()
+      this.error = false
+      this.$emit('row-click', {})
+    },
+    validate () {
+      if (!this.clickItem) {
+        this.$message.error('请选择版本')
+        this.error = true
+      }
+      return !!this.clickItem
     },
     async getList () {
       this.loading = true
+      const { time } = this.searchValues
       try {
         const { data } = await getSolutionPage({
           page: {
@@ -97,7 +107,9 @@ export default {
             history: 2,
             uuid: this.uuid,
             env: 0
-          }
+          },
+          startDate: time?.[0],
+          endDate: time?.[1]
         })
         this.items = data.records.map(e => e.entity)
         this.total = data.total
@@ -111,17 +123,21 @@ export default {
       this.$refs[ref]?.open && this.$refs[ref].open(item)
     },
     // 发布
-    async onIssue (row) {
-      this.loading = true
-      try {
-        await sendSalaryRelease({ performanceSolutionId: row.performanceSolutionId })
-        this.$message.success('发布成功')
-        this.getList()
-      } catch (error) {
-        this.$message.error(error)
-      } finally {
-        this.loading = false
-      }
+    // async onIssue (row) {
+    //   this.loading = true
+    //   try {
+    //     await sendSalaryRelease({ performanceSolutionId: row.performanceSolutionId })
+    //     this.$message.success('发布成功')
+    //     this.getList()
+    //   } catch (error) {
+    //     this.$message.error(error)
+    //   } finally {
+    //     this.loading = false
+    //   }
+    // },
+    onSearch () {
+      this.pageInfo.current = 1
+      this.getList()
     },
     onPageChange (index) {
       this.pageInfo.current = index
@@ -130,11 +146,21 @@ export default {
     onSortChange (orders) {
       this.orders = orders
       this.getList()
+    },
+    onCurrentChange (item) {
+      this.clickItem = item
+      this.error = false
+      this.$emit('row-click', {
+        name: item.version,
+        id: item.performanceSolutionId
+      })
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-
+.error {
+  border-color: red;
+}
 </style>

src/views/sandbox/sandboxParam.vue

@@ -1,129 +1,80 @@
 <template>
-  <m-dialog ref="dialog" title="系数管理" v-bind="$attrs">
-    <template #button-after>
-      <m-button type="success" @click="onStart">开始测算</m-button>
-    </template>
-    <m-form ref="form" v-loading="loading" label-width="100px" :items="formItems" v-model="formValues">
-      <template #name>
-        <el-tag color="primary">{{ itemData.title }}</el-tag>
-      </template>
-      <template #[`month.after`]>* 请选择数据所在月份进行测算</template>
-      <template #param>
-        <m-card shadow="never">
-          <template v-if="items.length" v-slot:default>
-            <el-tabs v-model="activeNames" >
-              <el-tab-pane
-                v-for="item in items"
-                :key="item.category"
-                :title="item.category"
-                :name="item.category"
-                :label="item.category"
-              >
-                <el-form-item
-                  label-width="150px"
-                  v-for="(calculate, index) in item.calculateConfigurations"
-                  :key="index"
-                  :label="calculate.name"
-                  class="mt-3"
+  <m-card shadow="never">
+    <template v-if="items.length" v-slot:default>
+      <el-form v-loading="loading">
+        <el-tabs v-model="activeNames" >
+          <el-tab-pane
+            v-for="item in items"
+            :key="item.category"
+            :title="item.category"
+            :name="item.category"
+            :label="item.category"
+          >
+            <el-form-item
+              label-width="150px"
+              v-for="(calculate, index) in item.calculateConfigurations"
+              :key="index"
+              :label="calculate.name"
+              class="mt-3"
+            >
+              <template v-if="calculate.valueCategory === 0">
+                <el-slider
+                  input-size="small"
+                  v-model="calculate.value"
+                  :min="((calculate.miniValue === -Infinity || calculate.miniValue === null) ? -999 : calculate.miniValue) ?? -999"
+                  :max="((calculate.maxValue === Infinity || calculate.maxValue === null) ? 999 : calculate.maxValue) ?? 999"
+                  :step="0.01"
+                  :disabled="(calculate.miniValue === calculate.maxValue) && calculate.miniValue !== null"
+                  show-input
                 >
-                  <template v-if="calculate.valueCategory === 0">
-                    <el-slider
-                      input-size="small"
-                      v-model="calculate.value"
-                      :min="((calculate.miniValue === -Infinity || calculate.miniValue === null) ? -999 : calculate.miniValue) ?? -999"
-                      :max="((calculate.maxValue === Infinity || calculate.maxValue === null) ? 999 : calculate.maxValue) ?? 999"
-                      :step="0.01"
-                      :disabled="(calculate.miniValue === calculate.maxValue) && calculate.miniValue !== null"
-                      show-input
-                    >
-                    </el-slider>
-                  </template>
-                  <template v-else>
-                    <m-table
-                      clearHeader
-                      shadow="never"
-                      :headers="[
-                        { label: '名称', prop: 'name' },
-                        { label: '值', prop: 'value' }
-                      ]"
-                      :items="calculate.value"
-                    >
-                      <template #value="{ row }">
-                        <el-input v-model="row.value" size="small" placeholder="请输入对应的值"></el-input>
-                      </template>
-                    </m-table>
+                </el-slider>
+              </template>
+              <template v-else>
+                <m-table
+                  clearHeader
+                  shadow="never"
+                  :headers="[
+                    { label: '名称', prop: 'name' },
+                    { label: '值', prop: 'value' }
+                  ]"
+                  :items="calculate.value"
+                >
+                  <template #value="{ row }">
+                    <el-input v-model="row.value" size="small" placeholder="请输入对应的值"></el-input>
                   </template>
-                </el-form-item>
-              </el-tab-pane>
-            </el-tabs>
-          </template>
-          <template v-if="!items.length">
-            <m-empty description="尚未配置系数"></m-empty>
-          </template>
-        </m-card>
-      </template>
-    </m-form>
-
-    <SandboxCalculate ref="sandboxCalculateRefs" append-to-body @issue="$emit('issue', $event)"></SandboxCalculate>
-  </m-dialog>
+                </m-table>
+              </template>
+            </el-form-item>
+          </el-tab-pane>
+        </el-tabs>
+      </el-form>
+    </template>
+    <template v-if="!items.length">
+      <m-empty description="尚未配置系数"></m-empty>
+    </template>
+  </m-card>
 </template>
 
 <script>
-import SandboxCalculate from './sandboxCalculate.vue'
 import {
   getSolutionDetails
   // saveSolution
 } from '@/api/salary'
 export default {
   name: 'salarySolutionParam',
-  components: {
-
-    SandboxCalculate
-  },
   data () {
     return {
       activeNames: null,
       loading: false,
       itemData: {},
-      items: [],
-      formItems: [
-        {
-          label: '名称',
-          prop: 'name'
-        },
-        {
-          label: '数据月份',
-          prop: 'month',
-          type: 'datePicker',
-          options: {
-            clearable: false,
-            type: 'month',
-            format: 'yyyy-MM',
-            valueFormat: 'yyyy-MM',
-            placeholder: '选择查询月份'
-          },
-          rules: [
-            { required: true, message: '请选择数据月份', trigger: 'change' }
-          ]
-        },
-        {
-          label: '系数管理',
-          prop: 'param'
-        }
-      ],
-      formValues: {}
+      items: []
     }
   },
   methods: {
-    async open (item) {
-      this.itemData = item
-      this.$refs.dialog.open()
+    async init (performanceSolutionId) {
       this.loading = true
       try {
-        const { data } = await getSolutionDetails({
-          performanceSolutionId: item.performanceSolutionId
-        })
-
+        const { data } = await getSolutionDetails({ performanceSolutionId })
         this.items = data.performanceSolutionDetailRespCategoryVos.map(e => {
           e.calculateConfigurations = e.calculateConfigurations.map(item => {
             if (item.valueCategory !== 0) {
@@ -142,39 +93,19 @@ export default {
           return e
         })
         this.activeNames = this.items[0]?.category
+        this.itemData = data
       } catch (error) {
         this.$message.error(error)
-        this.$refs.dialog.close()
       } finally {
         this.loading = false
       }
     },
-    onStart () {
-      this.$refs.form.validate(valid => {
-        if (!valid) {
-          return
-        }
-        this.$refs.sandboxCalculateRefs.open(this.itemData, this.formValues.month)
-      })
+    validate () {
+      if (!this.items.length) {
+        this.$message.error('尚未配置系数')
+      }
+      return this.items.length > 0
     }
-    // async onSure () {
-    //   const query = {
-    //     entity: {
-    //       performanceSolutionId: this.itemData.performanceSolutionId,
-    //       env: 1,
-    //       testStatus: 0
-    //     },
-    //     performanceSolutionDetailRespCategoryVos: this.items
-    //   }
-    //   try {
-    //     await saveSolution(query)
-    //     this.$refs.dialog.close()
-    //     this.$emit('refresh')
-    //     this.$message.success('保存成功')
-    //   } catch (error) {
-    //     this.$message.error(error)
-    //   }
-    // }
   }
 }
 </script>

src/views/sandbox/sandboxResult.vue

@@ -1,159 +1,23 @@
 <template>
   <m-dialog title="计算结果" ref="dialog" v-bind="$attrs" width="1200px">
-    <template #button-after>
-      <slot name="button"></slot>
-    </template>
-    <div v-loading="loading">
-      <m-card shadow="never">
-        <el-radio-group v-model="choose" @input="getList">
-          <el-radio
-            v-for="item in radioItems"
-            :key="item.id"
-            :label="item.id"
-          >
-            {{ item.name }}
-          </el-radio>
-        </el-radio-group>
-      </m-card>
-
-      <m-search class="mt-3" shadow="never" :items="searchItems" v-model="searchValues" @search="onSearch"></m-search>
-
-      <m-table
-        class="mt-3"
-        shadow="never"
-        clearHeader
-        :items="tableItems"
-        :headers="tableHeaders"
-        :page-size="tablePageInfo.size"
-        :page-current="tablePageInfo.current"
-        :total="tableTotal"
-        @page-change="onPageChange"
-        @sort-change="onSortChange"
-      ></m-table>
-    </div>
+    <SandboxResultDetails ref="sandboxResultDetailsRefs"></SandboxResultDetails>
   </m-dialog>
 </template>
 
 <script>
-import {
-  getSandboxResultList,
-  getSandboxResultPage
-} from '@/api/salary'
+import SandboxResultDetails from './sandboxResultDetails.vue'
 export default {
   name: 'sandboxResult',
-  data () {
-    return {
-      loading: false,
-      isSuccess: false,
-      radioItems: [],
-      tableTotal: 0,
-      tableOrders: [],
-      tablePageInfo: {
-        size: 10,
-        current: 1
-      },
-      tableItems: [],
-      tableHeaders: [],
-      searchValues: {},
-      choose: null
-    }
-  },
-  computed: {
-    searchItems () {
-      return [
-        {
-          label: '列名',
-          prop: 'column',
-          type: 'select',
-          options: {
-            placeholder: '请选择列名',
-            items: this.tableHeaders.map(e => {
-              return {
-                label: e.label,
-                value: e.prop
-              }
-            })
-          }
-        },
-        {
-          label: '值',
-          prop: 'value',
-          type: 'input',
-          options: {
-            placeholder: '请输入值'
-          }
-        }
-      ]
-    }
+  components: {
+    SandboxResultDetails
   },
   methods: {
     open () {
       this.$refs.dialog.open()
-      this.getSandboxResultList()
-    },
-    async getSandboxResultList () {
-      this.loading = true
-      try {
-        const { data } = await getSandboxResultList({
-          modelName: '客户维业绩流水账'
-        })
-        this.radioItems = data || []
-        if (this.radioItems.length) {
-          this.choose = this.radioItems[0].id
-        }
-        await this.getList()
-        this.isSuccess = true
-      } catch (error) {
-        this.$message.error(error)
-      } finally {
-        this.loading = false
-      }
-    },
-
-    async getList () {
-      this.loading = true
-      const item = this.radioItems.find(e => e.id === this.choose)
-      try {
-        const param = {
-          page: {
-            ...this.tablePageInfo,
-            orders: this.tableOrders
-          },
-          id: this.choose,
-          type: item.node_type
-          // query: [{ column: item, compare: '=', value: '当期个人贷款月累计收息' }]
-        }
-        if (this.searchValues.column && this.searchValues.value) {
-          param.query = [{ column: this.searchValues.column, compare: '=', value: this.searchValues.value }]
-        }
-        const { data } = await getSandboxResultPage(param)
-        this.tableHeaders = data.dataColumn.map(e => {
-          return {
-            label: e.name,
-            prop: e.enName
-          }
-        })
-        this.tableItems = data.page.records
-        this.tableTotal = data.page.total
-      } catch (error) {
-        this.$message.error(error)
-      } finally {
-        this.loading = false
-      }
-    },
-    onSearch () {
-      this.tablePageInfo.current = 1
-      this.getList()
-    },
-    onPageChange (index) {
-      this.tablePageInfo.current = index
-      this.getList()
-    },
-    onSortChange (v) {
-      this.tableOrders = v
-      this.getList()
+      this.$nextTick(() => {
+        this.$refs.sandboxResultDetailsRefs.init()
+      })
     }
-
   }
 }
 </script>

src/views/sandbox/sandboxResultDetails.vue

@@ -0,0 +1,154 @@
+<template>
+  <div v-loading="loading">
+    <m-card shadow="never">
+      <el-radio-group v-model="choose" @input="getList">
+        <el-radio
+          v-for="item in radioItems"
+          :key="item.id"
+          :label="item.id"
+        >
+          {{ item.name }}
+        </el-radio>
+      </el-radio-group>
+    </m-card>
+
+    <m-search class="mt-3" shadow="never" :items="searchItems" v-model="searchValues" @search="onSearch"></m-search>
+
+    <m-table
+      class="mt-3"
+      shadow="never"
+      clearHeader
+      :items="tableItems"
+      :headers="tableHeaders"
+      :page-size="tablePageInfo.size"
+      :page-current="tablePageInfo.current"
+      :total="tableTotal"
+      @page-change="onPageChange"
+      @sort-change="onSortChange"
+    ></m-table>
+  </div>
+</template>
+
+<script>
+import {
+  getSandboxResultList,
+  getSandboxResultPage
+} from '@/api/salary'
+export default {
+  name: 'sandboxResultDetails',
+  data () {
+    return {
+      loading: false,
+      isSuccess: false,
+      radioItems: [],
+      tableTotal: 0,
+      tableOrders: [],
+      tablePageInfo: {
+        size: 10,
+        current: 1
+      },
+      tableItems: [],
+      tableHeaders: [],
+      searchValues: {},
+      choose: null
+    }
+  },
+  computed: {
+    searchItems () {
+      return [
+        {
+          label: '列名',
+          prop: 'column',
+          type: 'select',
+          options: {
+            placeholder: '请选择列名',
+            items: this.tableHeaders.map(e => {
+              return {
+                label: e.label,
+                value: e.prop
+              }
+            })
+          }
+        },
+        {
+          label: '值',
+          prop: 'value',
+          type: 'input',
+          options: {
+            placeholder: '请输入值'
+          }
+        }
+      ]
+    }
+  },
+  methods: {
+    async init () {
+      this.loading = true
+      try {
+        const { data } = await getSandboxResultList({
+          modelName: '客户维业绩流水账'
+        })
+        this.radioItems = data || []
+        if (this.radioItems.length) {
+          this.choose = this.radioItems[0].id
+        }
+        await this.getList()
+        this.isSuccess = true
+      } catch (error) {
+        this.$message.error(error)
+      } finally {
+        this.loading = false
+      }
+    },
+
+    async getList () {
+      this.loading = true
+      const item = this.radioItems.find(e => e.id === this.choose)
+      try {
+        const param = {
+          page: {
+            ...this.tablePageInfo,
+            orders: this.tableOrders
+          },
+          id: this.choose,
+          type: item.node_type
+          // query: [{ column: item, compare: '=', value: '当期个人贷款月累计收息' }]
+        }
+        if (this.searchValues.column && this.searchValues.value) {
+          param.query = [{ column: this.searchValues.column, compare: '=', value: this.searchValues.value }]
+        }
+        const { data } = await getSandboxResultPage(param)
+        this.tableHeaders = data.dataColumn.map(e => {
+          return {
+            label: e.name,
+            prop: e.enName
+          }
+        })
+        this.tableItems = data.page.records
+        this.tableTotal = data.page.total
+      } catch (error) {
+        this.$message.error(error)
+      } finally {
+        this.loading = false
+      }
+    },
+    onSearch () {
+      this.tablePageInfo.current = 1
+      this.getList()
+    },
+    onPageChange (index) {
+      this.tablePageInfo.current = index
+      this.getList()
+    },
+    onSortChange (v) {
+      this.tableOrders = v
+      this.getList()
+    }
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/sandbox/sandboxRules.vue

@@ -0,0 +1,130 @@
+<template>
+  <div>
+    <m-search shadow="never" class="mb-3" :items="searchItems" v-model="searchValues" @search="onSearch"></m-search>
+    <m-table
+      v-loading="loading"
+      clearHeader
+      shadow="never"
+      :items="items"
+      :headers="headers"
+      :total="total"
+      :page-size="pageInfo.size"
+      :page-current="pageInfo.current"
+      highlight-current-row
+      v-bind="$attrs"
+      :class="{ error }"
+      @current-change="onCurrentChange"
+      @page-change="onPageChange"
+      @sort-change="onSortChange"
+    ></m-table>
+  </div>
+</template>
+
+<script>
+import {
+  getSolutionPage
+} from '@/api/salary'
+export default {
+  name: 'sandboxRules',
+  props: {
+    permission: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data () {
+    return {
+      loading: false,
+      error: false,
+      searchItems: [
+        {
+          label: '名称',
+          prop: 'title',
+          type: 'input',
+          options: {
+            placeholder: '请输入规则名称'
+          }
+        }
+      ],
+      searchValues: {},
+      items: [],
+      headers: [
+        { label: '名称', prop: 'title' },
+        { label: '描述', prop: 'tag' },
+        { label: '创建日期', prop: 'createDate' }
+      ],
+      total: 0,
+      orders: [{
+        asc: false,
+        column: 'performance_solution_id'
+      }],
+      pageInfo: {
+        current: 1,
+        size: 5
+      },
+      clickItem: null
+    }
+  },
+  created () {
+    this.onInit()
+  },
+  methods: {
+    async onInit () {
+      this.loading = true
+      // const { time, ...query } = this.searchValues
+      try {
+        const { data } = await getSolutionPage({
+          page: {
+            ...this.pageInfo,
+            orders: this.orders
+          },
+          entity: {
+            ...this.searchValues,
+            history: 0,
+            env: 0
+          }
+        })
+        this.items = data.records.map(e => e.entity)
+        this.total = data.total
+      } catch (error) {
+        this.$message.error(error)
+      } finally {
+        this.loading = false
+      }
+    },
+    validate () {
+      if (!this.clickItem) {
+        this.$message.error('请选择一条规则')
+        this.error = true
+      }
+      return !!this.clickItem
+    },
+    onSearch () {
+      this.pageInfo.current = 1
+      this.onInit()
+    },
+    onPageChange (page) {
+      this.pageInfo.current = page
+      this.onInit()
+    },
+    onSortChange (v) {
+      this.orders = v
+      this.onInit()
+    },
+    onCurrentChange (item) {
+      this.clickItem = item
+      this.error = false
+      this.$emit('row-click', {
+        name: item.title,
+        id: item.uuid
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.error {
+  border-color: red;
+}
+</style>