remuneration/src/views/salary/solution/salarySolution/salarySolutionEdit.vue

<template>
  <m-dialog ref="dialog" :title="itemData.entity ? '编辑' : '新增'" @sure="onSure">
    <m-form ref="form" v-model="formQuery" :items="items" v-loading="loading"></m-form>
  </m-dialog>
</template>

<script>
import {
  saveSolution,
  getSolutionDetails
} from '@/api/salary'
import {
  getPostNameByOrganizationNo
// getOrganizationAtlasPostName
} from '@/api/system'
import { mapGetters } from 'vuex'
export default {
  name: 'salary-solution-edit',
  data () {
    return {
      loading: false,
      formQuery: {
        title: null,
        tag: null,
        organizationNo: null,
        postNames: [],
        rewriteType: 0
      },
      postNamesItems: [],
      itemData: {}
    }
  },
  computed: {
    ...mapGetters(['organizationTree']),
    items () {
      return [
        {
          label: '方案名称',
          prop: 'title',
          type: 'input',
          rules: [
            { required: true, message: '请输入方案名称', trigger: 'blur' }
          ],
          options: {
            placeholder: '请输入方案名称'
          }
        },
        {
          label: '方案描述',
          prop: 'tag',
          type: 'input',
          options: {
            placeholder: '请输入方案描述'
          }
        },
        {
          label: '绩效机构',
          prop: 'organizationNo',
          type: 'cascader',
          options: {
            filterable: true,
            clearable: true,
            placeholder: '请选择机构',
            options: this.organizationTree,
            showAllLevels: false,
            props: {
              emitPath: false,
              checkStrictly: true,
              value: 'organizationNo',
              label: 'organizationName',
              children: 'child'
            }
          },
          handles: {
            change: this.onchange
          },
          rules: [
            { required: true, message: '请选择绩效机构', trigger: 'change' }
          ]
        },
        {
          label: '绩效职务',
          prop: 'postNames',
          type: 'select',
          options: {
            placeholder: '请选择绩效职务',
            filterable: true,
            collapseTags: true,
            multiple: true,
            items: this.postNamesItems
          },
          rules: [
            { required: true, message: '请选择绩效职务', trigger: 'change' }
          ]
        }
      ]
    }
  },
  methods: {
    async open (item) {
      this.$refs.dialog.open()
      this.formQuery.title = item?.title ?? null
      this.formQuery.tag = item?.tag ?? null
      this.formQuery.organizationNo = item?.organizationNo ?? null
      this.formQuery.postNames = []
      this.itemData = {}
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
      if (!item) {
        return
      }
      this.loading = true
      try {
        const { data } = await getSolutionDetails({
          performanceSolutionId: item.performanceSolutionId
        })
        this.itemData = data
        this.onchange(this.formQuery.organizationNo)
        this.formQuery.postNames = item.postNames
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.loading = false
      }
    },
    async onchange (organizationNo) {
      this.formQuery.postNames = []
      if (!organizationNo) {
        return
      }
      try {
        const { data } = await getPostNameByOrganizationNo({
          organizationNo
        })
        this.postNamesItems = (data && data.map(e => {
          return {
            label: e,
            value: e
          }
        })) || []
      } catch (error) {
        this.$message.error(error)
      }
    },
    onSure () {
      this.$refs.form.validate(async valid => {
        if (valid) {
          const query = {
            entity: {
              performanceSolutionId: this.itemData.entity?.performanceSolutionId,
              ...this.formQuery
            },
            performanceSolutionDetailRespCategoryVos: this.itemData.performanceSolutionDetailRespCategoryVos
          }
          try {
            await saveSolution(query)
            this.$refs.dialog.close()
            this.$emit('refresh')
            this.$message.success('保存成功')
          } catch (error) {
            this.$message.error(error)
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>