laisiao/src/DRP/HDrpManagement/performanceGoals/detail/modules/edit.vue

<template>
  <div>
    <a-button type="primary" @click="showDrawer">编辑</a-button>
    <a-drawer
      v-model:open="visible"
      class="custom-class"
      title="编辑年度目标"
      placement="right"
      :get-container="!fullscreen"
      :style="{ position: 'absolute' }"
      width="500"
      :closable="false"
      @close="onClose"
    >
      <a-form ref="formRef" :model="form" layout="vertical">
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-item label="年度" name="year" :rules="[{ required: true, message: '请选择目标年度' }]">
              <a-date-picker disabled style="width:100%" v-model:value="form.year" value-format="YYYY" picker="year" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="考核指标">
              <a-radio-group style="width:100%" v-model:value="form.assessmentindicators" @change="onChange">
                <a-radio value="订单">订单</a-radio>
                <a-radio value="出货">出货</a-radio>
                <!-- <a-radio value="开票">开票</a-radio> -->
                <a-radio value="收款">收款</a-radio>
              </a-radio-group>        
            </a-form-item>
          </a-col>
          <a-col v-if="form.assessmentindicators !== '收款'">
            <a-form-item label="统计方式">
              <a-radio-group style="width:100%" v-model:value="form.statisticaldimensionValue">
                <a-radio v-for="item in options" :key="item.index" :value="item.value">{{item.name}}</a-radio>
              </a-radio-group> 
            </a-form-item>  
          </a-col>
          <a-col :span="24" v-else>
            <a-form-item label="选择资金账户" name="sa_accountclassids" :rules="[{ required: true, message: '请选择资金账户' }]">
              <a-select
                v-model:value="form.sa_accountclassids"
                mode="multiple"
                style="width:100%"
                placeholder="请选择">
                <a-select-option v-for="item in alist" :key="item.sa_accountclassid" :value="item.sa_accountclassid">{{item.accountname}}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="类型">
              <a-select
                v-model:value="form.statisticaldimensionTypeValue"
                mode="multiple"
                style="width:100%"
                placeholder="请选择"
                @change="onTypeChange">
                <a-select-option v-for="item in tlist" :key="item.index" :value="item.value"></a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="明细">
              <a-select
                v-model:value="form.statisticaldimensionMxValue"
                mode="multiple"
                style="width:100%"
                placeholder="请选择">
                <a-select-option v-for="item in mxlist" :key="item.index" :value="item"></a-select-option>
              </a-select>
            </a-form-item>  
          </a-col>
        </a-row>
      </a-form>
      <template #extra>
        <a-space>
          <a-button @click="onClose">关闭</a-button>
          <a-button type="primary" @click="submit">保存</a-button>
        </a-space>
      </template>
    </a-drawer>
  </div>
</template>

<script setup>
import {ref,defineEmits,defineProps} from 'vue'
import Api from '@/api/api'
import utils from '@/utils/utils'
import { storeToRefs } from 'pinia'
import { useBaseStore } from '@/stores/modules/base'
const base = useBaseStore()
let { fullscreen } = storeToRefs(base)
const emit = defineEmits(['onSuccess'])
const props = defineProps(['data'])

const visible = ref(false)
const form = ref({
  sa_salestargetbillid:0,
  year:"",
  sales:[],
  assessmentindicators:"收款",
  statisticaldimensionValue:'',
  sa_accountclassids:[],
  statisticaldimensionTypeValue:[],
  statisticaldimensionMxValue:[]
})
const showDrawer = ()=>{
  let obj = {
    sa_salestargetbillid:props.data.sa_salestargetbillid,
    year:String(props.data.year),
    sa_accountclassids:props.data.sa_accountclassids[0]?[props.data.sa_accountclassids[0].sa_accountclassid] : '',
    assessmentindicators:props.data.assessmentindicators,
  }
  form.value = Object.assign({},form.value,obj)
  form.value.statisticaldimensionTypeValue = props.data.statisticaldimension.type
  form.value.statisticaldimensionMxValue = props.data.statisticaldimension.mx
  visible.value = true
  onChange({
    target:{
      value:props.data.assessmentindicators
    }
  })
  accountList()
  typeList()
}
const onClose = () => {
  visible.value = false;
  formRef.value.resetFields();
};
const formRef = ref()
const submit = async () => {
  console.log(form.value)
  const values = await formRef.value.validateFields();
  if (form.value.assessmentindicators !== '收款') {
    form.value.statisticaldimension = form.value.statisticaldimensionValue
  } else {
    form.value.statisticaldimension = {
      mx:form.value.statisticaldimensionMxValue,
      type:form.value.statisticaldimensionTypeValue
    }
  }
  
  const res = await Api.post({
    "id": "20220831165302",
    content:{
      sa_salestargetbillid:props.data.sa_salestargetbillid,
      sales:[],
      year:form.value.year,
      statisticaldimension:form.value.statisticaldimension,
      assessmentindicators:form.value.assessmentindicators,
      sa_accountclassids:form.value.sa_accountclassids,
    }
  })
  utils.message(res,'保存成功！',()=>{
    emit('onSuccess')
    onClose()
  })
}
const options=ref([{name:'订单审核',value:'订单审核'},{name:'订单提交',value:'订单提交'}])
const onChange = ({target})=>{
  switch (target.value) {
    case '订单':
      form.value.sa_accountclassids = []
      form.value.statisticaldimensionValue = '订单审核'
      options.value = [{name:'订单审核',value:'订单审核'},{name:'订单提交',value:'订单提交'}]
      break;
    case '出货':
      form.value.sa_accountclassids = []
      form.value.statisticaldimensionValue = '销售出库单审核'
      options.value = [{name:'销售出库单审核',value:'销售出库单审核'}]
      break
    case '开票':
      form.value.statisticaldimensionTypeValue = []
      form.value.statisticaldimensionMxValue = []
      form.value.statisticaldimensionValue = '开票单审核'
      options.value = [{name:'开票单审核',value:'开票单审核'}]
     break
  default:
      options.value = []
      accountList()
      typeList()
      break;
  }
}
const alist = ref([])
const accountList = async () => {
  const res = await Api.requested({
    id:20221008134803,
    content:{
      pageNumber:1,
      pageSize:100
    }
  })
  alist.value = res.data
}

const tlist = ref([])
const typeList = async () => {
  const res = await Api.optionstype('cashbillrectype')
  tlist.value = res.data
}
const mxlist = ref([])
const onTypeChange = (val)=>{
  let mx = new Map()
  tlist.value.forEach((e)=>{
    mx.set(e.remarks,e.subvalues)
  })
  mxlist.value = []
  val.forEach(e => {
    mxlist.value = mxlist.value.concat(mx.get(e))
    form.value.statisticaldimensionMxValue = mxlist.value
  });

}

</script>
<style>
</style>