crm_extend/src/pages/indent-manage/product/components/examine.vue

<template>
  <div class="">
    <el-dialog
      v-model="show"
      :title="$t(prefix + 'dialog_title_audit')"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="close"
      width="550px"
    >
      <el-form
        ref="formRef"
        v-loading="loading"
        style="width: 500px"
        :rules="rules"
        :model="form"
        label-width="110px"
      >
        <el-form-item
          :label="$t(prefix + 'label_name')"
          prop=""
        >
          <div>{{ form.product_name }}</div>
        </el-form-item>
        <el-form-item
          label="中文品名"
          prop=""
        >
          <div>{{ form.product_name_cn }}</div>
        </el-form-item>
        <el-form-item
          :label="$t(prefix + 'label_audit')"
          prop=""
        >
          <el-radio-group
            v-model="form.status"
            @change="formRef!.clearValidate('product_sku')"
          >
            <el-radio :label="1">审核通过</el-radio>
            <el-radio :label="2">审核不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          :label="$t(prefix + 'label_category')"
          prop="category_id"
        >
          <el-cascader
            v-model="form.category_id"
            style="width: 410px"
            :options="categoryData"
            :props="{ label: 'name', value: 'id' }"
          ></el-cascader>
        </el-form-item>
        <el-form-item
          label="SKU"
          prop="product_sku"
        >
          <el-input v-model="form.product_sku" />
        </el-form-item>
        <el-form-item
          :label="$t(prefix + 'label_feedback')"
          prop="feedback"
        >
          <el-input
            v-model="form.feedback"
            type="textarea"
            :rows="5"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="flex justify-center items-center">
          <el-button
            type="danger"
            size="small"
            @click="checkForm(2)"
          >
            驳回
          </el-button>
          <el-button
            size="small"
            type="primary"
            @click="checkForm(1)"
          >
            审核通过
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { defineComponent, ref, watch } from 'vue'
import {
  ElRadio,
  ElRadioGroup,
  ElDialog,
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElNotification,
  ElCascader,
} from 'element-plus'
import type { FormInstance } from 'element-plus'
import cloneDeep from 'lodash.clonedeep'
import { $t } from '@/i18n/index'
import { saveExamine } from '@/api/product'
defineComponent({
  name: 'DialogExamineRecord',
})
const $emit = defineEmits(['update:visible'])
const {
  visible = false,
  dataForExamine = {} as any,
  categoryData = [],
} = defineProps<{
  visible: boolean
  dataForExamine: object
  categoryData: any[]
}>()

const prefix = 'order.product.'
let show = ref(false)
let loading = ref(false)
const formRef = ref<FormInstance>()
const form = ref({
  product_name: '',
  product_name_cn: '',
  product_sku: '',
  category_id: [],
  images: '',
  status: 1,
} as any)

const checkSKU = (rule: any, value: any, cb: any) => {
  if (form.value.status !== 1) {
    cb()
  } else {
    if (!value) {
      cb(new Error($t('text_please_input')))
    } else {
      cb()
    }
  }
}
const rules = {
  product_sku: [{ required: true, validator: checkSKU, trigger: 'change' }],
  category_id: [
    {
      required: true,
      message: $t('text_please_input'),
      trigger: 'change',
    },
  ],
}

watch(
  () => visible,
  () => {
    show.value = visible
    if (show.value) {
      const temp: any = {
        feedback: '',
      }
      if (typeof dataForExamine.category_id === 'number') {
        temp.category_id = getCategory(dataForExamine.category_id)
      }
      form.value = Object.assign({}, cloneDeep(dataForExamine), temp)
      // eslint-disable-next-line
      if (form.value.status == 0) {
        //  未审核状态直接选 审核通过, 其他两种情况不管
        form.value.status = 1
      }
      delete form.value.admin_name
      delete form.value.admin_id
      delete form.value.create_time
      delete form.value.update_time
    }
  },
)

const getCategory = (id: number | string) => {
  const result: any[] = []
  categoryData.forEach((first: any) => {
    if (first.id === id) {
      result.push(first.id)
      return
    }
    if (first.children?.length) {
      first.children.forEach((second: any) => {
        if (second.id === id) {
          result.push(first.id)
          result.push(second.id)
          return
        }
        if (second.children?.length) {
          second.children.forEach((third: any) => {
            if (third.id === id) {
              result.push(first.id)
              result.push(second.id)
              result.push(third.id)
              return
            }
          })
        }
      })
    }
  })

  return result
}
/**
 * flag 2 驳回. 其他通过.
 */
const checkForm = (flag: number) => {
  if (!formRef.value) return
  formRef.value.validate((valid) => {
    if (valid) {
      const p = cloneDeep(form.value)

      p.category_id = p.category_id[p.category_id.length - 1].toString()
      p.status = flag
      p.product_id = p.id
      delete p.product_name
      delete p.product_name_cn
      delete p.images

      saveExamine(p).then((res: any) => {
        if (res.code === 1) {
          ElNotification({
            title: '操作成功',
            message: '正在刷新数据',
            duration: 3000,
          })
          close()
        }
      })
    }
  })
}
let close = (done = {} as any) => {
  $emit('update:visible', 0)
  if (typeof done === 'function') done()
}
</script>

<style lang="scss" scoped></style>