report-v3/src/views/tipsSetting/invManagerTotalTips/components/demand-modify-modal.vue

<script setup lang="ts">
import { shallowRef, ref } from "vue";
import { ElForm, ElMessage } from "element-plus";
import BusinessQuery from "/@/components/BasicForm/src/fields/business-query.vue";
import { onlyNumOnePoint } from "../../_utils";
import apis from "../config/apis";
import dayjs from "dayjs";


import { unit2TenThousand2 } from "/@/utils/calc"

defineProps<{ isBusiness?: boolean }>();

const emit = defineEmits(["refresh"]);
const visible = shallowRef(false);
const loading = shallowRef(false);
const type = ref('create')


const createInitialData = () => ({
  date: '',
  companyNo: '',
  totalTip1: '',
  cost_tips: ''
});

const user_list = ref([])

const formData = ref(createInitialData())
const formRef = ref<InstanceType<typeof ElForm> | null>(null)

const rules = {
  date: [{ required: true, message: "请选择数据时间", trigger: "change" }],
  companyNo: [{ required: true, message: "请选择业务公司", trigger: "change" }],
  totalTip1: [{ required: true, message: "请输入营收目标", trigger: "change" }],
  cost_tips: [{ required: true, message: "请输入毛利目标", trigger: "change" }]
};

function onInput(value, prop) {
  if (Number(value) >= 100000000) {
    formData.value[prop] = 99999999.99
  } else {
    formData.value[prop] = onlyNumOnePoint(value)
  }
}


async function onSubmit() {
  try {
    await formRef.value?.validate()
    const { companyNo, date, totalTip1, cost_tips, id } = formData.value
    if (Number(cost_tips) > Number(totalTip1)) {
      ElMessage.warning("毛利目标不能功大于应收目标")
      return
    }


    loading.value = true
    const [year, month] = date.split('-')

    const parameter = {
      id,
      inv_tips: totalTip1,
      cost_tips: cost_tips,
      uid: companyNo,
      month,
      year
    }

    const isUpdate = type.value === 'update'
    if (!isUpdate) delete parameter['id']
    const api = isUpdate ? apis.update : apis.create
    const result = await api(parameter)
    if (result.code == 0 || result.code == 1) {
      ElMessage.success((isUpdate ? '修改' : '添加') + '成功')
      visible.value = false
      emit('refresh')
    } else {
      ElMessage.warning(result.message)
    }

    console.log(111)
    loading.value = false
  } catch (err) {
    console.log(err)
  }
}

function disabledDate(time) {
  const current = dayjs(new Date()).format('YYYY')
  const target = dayjs(time).format('YYYY')
  const minDate = new Date(2023, 0, 1);
  return target - current >= 2 || time.getTime() < minDate.getTime();
}

async function requestData() {
  loading.value = true
  const data = await apis.user_list({ level: '2', size: 1000, page: 1 })
  loading.value = false

  if (data.code === 1) { user_list.value = data.data.list }
}

defineExpose({
  onDisplay: async (row) => {
    visible.value = true;
    await requestData()
    if (row.id) {
      type.value = 'update'
      const { id, year, month, cost_tips, inv_tips, uid } = row
      formData.value = {
        id,
        companyNo: uid,
        date: `${year}-${String(month).length === 1 ? '0' + month : month}`,
        totalTip1: inv_tips,
        cost_tips: cost_tips
      }
      // setTimeout(() => formData.value.companyNo = row.companyNo, 500);
    } else {
      type.value = 'create'
      formData.value = { date: '', companyNo: row.uid, totalTip1: '', cost_tips: '0' }
      // setTimeout(() => formData.value.companyNo = row.companyNo, 500);
    }
  }
});
</script>

<template>
  <el-dialog v-model="visible" :title="(type === 'update' ? '修改' : '添加') + '业务经理指标'" center
    @close="() => formData = createInitialData()" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form label-width="90px" :rules="rules" :model="formData" ref="formRef">
      <ElFormItem label="指标月份" prop="date">
        <ElDatePicker v-model="formData.date" type="month" style="width: 100%" placeholder="指标月份" value-format="YYYY-MM"
          :disabled="type === 'update'" :disabledDate="disabledDate" />
      </ElFormItem>

      <ElFormItem label="业务经理" prop="companyNo">
        <ElSelect style="width: 100%" v-model="formData.companyNo" placeholder="业务经理" filterable>
          <ElOption v-for="item in user_list" :label="item.nickname" :value="item.id" :disabled="item.status == '0'"
            :key="item.id + '11'" />
        </ElSelect>
      </ElFormItem>

      <ElFormItem label="开票指标" prop="totalTip1">
        <ElInput placeholder="开票指标" v-model="formData.totalTip1" @input="value => onInput(value, 'totalTip1')">
          <template #append>{{ unit2TenThousand2(formData.totalTip1) }}</template>
        </ElInput>
      </ElFormItem>

      <ElFormItem label="毛利指标" prop="cost_tips">
        <ElInput placeholder="利润指标" v-model="formData.cost_tips" @input="value => onInput(value, 'cost_tips')">
          <template #append>{{ unit2TenThousand2(formData.cost_tips) }}</template>
        </ElInput>
      </ElFormItem>

      <ElFormItem>
        <div class="w-full flex justify-end">
          <ElButton class="float-right" :loading="loading" @click="onSubmit" type="primary">
            保存
          </ElButton>
        </div>
      </ElFormItem>
    </el-form>
  </el-dialog>
</template>