web/src/components/settings/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">
            <el-button type="primary" style="margin-top:10px" round class="btn" @click="openCreateSearch"
                       plain>
              一键建档
            </el-button>
          </div>
          <el-form :model="form" label-width="auto" :rules="formRules">
            <el-descriptions
                :column="2"
                direction="vertical"
                border
            >
              <el-descriptions-item label="项目名称">
                <el-form-item>
                  <el-input v-model="form.itemName"/>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="单位">
                <el-form-item prop="unit">
                  <el-input v-model.number="form.unit" min="0">
                    <template #append>次</template>
                  </el-input>
                </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>
                  <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">
        <el-button type="primary" @click="save()">保存</el-button>
        <el-button @click="close">取消</el-button>
        <el-button v-if="props.id" @click="deleteDetail" type="danger">删除</el-button>
      </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/ItemSearch.vue";

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 save = () => {
  if (props.add) {
    if (props.menuId) {
      form.value.name = form.value.itemName
      post('save', {data: form.value, id: props.menuId}).then(() => {
        close()
      })
    } else {
      post('save', {data: form.value}).then(() => {
        close()
      })
    }
  } else if (id) {
    post("item/edit", {data: form.value}).then(() => {
      close()
    })
  } else {
    post("item/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) => {
  console.log(data, 'data')
  form.value = data
  form.value.itemName = data.name
  form.value.itemSocialCode = data.code
}
const deleteDetail = () => {
  post("item/delete", {id: props.id}).then((res: any) => {
    ElMessage.success('删除成功')
    close()
  })

}
onMounted(() => {

})
const init = () => {
  isShow.value = true
  if (props.id) {
    post("item/getItemById", {id: props.id}).then((res: any) => {
      form.value = res
      form.value.unit = Number(res.unit)
    })
  }
}
const formRules = {
  itemName: [
    {required: true, message: '请输入项目名称', trigger: 'blur'},
  ],
  unit: [
    {required: true, message: '请输入单位', trigger: 'blur'},
    {type: 'number', message: '单位必须为数字值'}
  ],
}
defineExpose({init})
</script>
<style scoped>
.bottom {
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 24px;
}
</style>