web/src/components/settings/item/ItemEdit.vue

<template>
  <Mask :is-show="isShow" width="400" height="550" @close="close" :title="props.id?'项目编辑':'项目新增'"
        :show-footer="true">
    <template #default>
      <el-scrollbar>
        <div style="padding: 0 24px">
          <div class="header" style="width: 100%;display: flex;justify-content: center;margin-bottom: 10px">
            <span style="margin-top:10px" class="btn small-btn" @click="openCreateSearch">一键建档</span>
          </div>
          <el-form :model="form" label-width="auto" :rules="formRules" ref="formRef">
            <el-descriptions
                :column="2"
                direction="vertical"
                border
            >
              <el-descriptions-item label="项目名称">
                <el-form-item prop="itemName">
                  <el-input v-model="form.itemName"/>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="单位">
                <el-form-item prop="unit">
                  <el-popover
                      placement="bottom"
                      title="Title"
                      trigger="click"
                  >
                    <template #reference>
                      <el-input v-model="form.unit"></el-input>
                    </template>
                    <UnitSelector :units="itemUnitList" v-model="form.unit"></UnitSelector>
                  </el-popover>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="原价">
                <el-form-item>
                  <el-input v-model="form.purchaseUnitPrice">
                    <template #prefix>
                      ￥
                    </template>
                  </el-input>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="售价">
                <el-form-item prop="unitPrice">
                  <el-input v-model="form.unitPrice">
                    <template #prefix>￥</template>
                  </el-input>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="医保码">
                <el-form-item>
                  <el-input v-model="form.itemSocialCode"/>
                </el-form-item>
              </el-descriptions-item>
            </el-descriptions>
          </el-form>
        </div>
      </el-scrollbar>
    </template>
    <template #footer>
      <div class="bottom">
        <span class="small-btn" @click="save()">保存</span>
        <span class="small-btn" @click="close">取消</span>
        <span class="danger-btn" v-if="props.id" @click="deleteDetail">删除</span>
      </div>
    </template>
  </Mask>
  <ItemSearch ref="createSearchRef" @confirm="createConfirm"/>
</template>
<script setup lang="ts">
import {defineProps, defineEmits, ref, nextTick, onMounted} from 'vue'
import {post} from "@/utils/request.ts";
import {ElMessage} from "element-plus";
import Mask from "@/components/common/Mask.vue";
import ItemSearch from "@/components/settings/item/ItemSearch.vue";
import UnitSelector from "@/components/inventory/goods/UnitSelector.vue";
import {itemUnitList} from "@/utils/unitList.ts"
import {API} from "@/assets/config/API.ts";

const props = defineProps({
  id: {
    type: String,
    default: ''
  },
  menuId: {
    type: String,
    default: ''
  },
  add: {
    type: Boolean,
    default: false
  }
})
const form = ref<any>({
  itemName: "", // 姓名
  itemSocialCode: "", // 医保码
  unit: "", // 手机号
  unitPrice: "", // 单位
  purchaseUnitPrice: "" //
})
const isShow = ref<any>(false)
const emit = defineEmits(['close'])
const close = () => {
  isShow.value = false
  form.value = {
    itemName: "", // 姓名
    itemSocialCode: "", // 医保码
    unit: "", // 手机号
    unitPrice: "", // 单位
    purchaseUnitPrice: "",//
    name: ''
  }
  emit('close')
}
const id = props.id
const formRef = ref<any>()
const save = () => {
  formRef.value?.validate((valid: boolean) => {
    if (!valid) {
      return;
    }
    // 如果验证通过，发送请求
    if (id) {
      post(API.Item.Base.Edit, {data: form.value}).then(() => {
        close()
      })
    } else {
      post(API.Item.Base.Add, {data: form.value}).then(() => {
        close()
      })
    }
  });


}
const imageURL = (e: any) => {
  form.value.electronicSignature = e
}
const createSearchRef = ref<any>('')
const openCreateSearch = () => {
  nextTick(() => {
    createSearchRef.value?.init(form.value.itemName);
  });
}
const createConfirm = (data: any) => {
  form.value.unit = data.unit
  form.value.itemName = data.name
  form.value.itemSocialCode = data.code

}
const deleteDetail = () => {
  post(API.Item.Base.Del, {id: props.id}).then((res: any) => {
    ElMessage.success('删除成功')
    close()
  })

}
onMounted(() => {

})
const init = () => {
  isShow.value = true
  if (props.id) {
    post(API.Item.Base.Get, {id: props.id}).then((res: any) => {
      form.value = res
    })
  }
}
const formRules = {
  itemName: [
    {required: true, message: '请输入项目名称', trigger: 'blur'},
  ],
  unit: [
    {required: true, message: '请输入单位', trigger: 'blur'},

  ],
  unitPrice: [
    {required: true, message: '请输入售价', trigger: 'blur'},
    {
      validator: (rule: any, value: number, callback: any) => {
        if (!/^\d+(\.\d{1,2})?$/.test(value.toString())) {
          callback(new Error('售价最多保留两位小数'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ]

}
defineExpose({init})
</script>
<style scoped>
.bottom {
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 24px;
}

.unit-item {
  display: flex;

  .unit {
    width: 20px;
    height: 32px;
    border: 1px #ddd solid;
    color: #818080;
    display: flex;
    justify-content: center;
  }
}
</style>