web/src/components/settings/ItemEdit.vue

<template>
  <div>
    <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">
      <el-descriptions
          :column="3"
          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>
            <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.itemSocialCode"/>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="原价">
          <el-form-item>
            <el-input v-model="form.purchaseUnitPrice">
              <template #append>
                <el-button  @click="imageURL">￥</el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="售价">
          <el-form-item>
            <el-input v-model="form.unitPrice">
              <template #append>
                <el-button  @click="imageURL">￥</el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-descriptions-item>
      </el-descriptions>
      <div class="btn-group">
        <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>
    </el-form>

  </div>
  <ItemSearch ref="createSearchRef" @confirm="selectedCallBack"/>
</template>
<script setup lang="ts">
import {defineProps, defineEmits, ref, nextTick, onMounted} from 'vue'
import {post} from "@/utils/request.ts";
import ItemSearch from "./ItemSearch.vue";
import {ElMessage} from "element-plus";

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 emit = defineEmits(['close'])
const close = () => {
  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 selectedCallBack = (searchResult: any) => {
  console.log(searchResult, 'data')
  form.value.itemName = searchResult.name;
  form.value.itemSocialCode = searchResult.code;
  form.value.unit = searchResult.unit;
}
const deleteDetail = () => {
  post("item/delete", {id: props.id}).then((res: any) => {
    ElMessage.success('删除成功')
    close()
  })

}
onMounted(() => {
  if (id) {
    post("item/getItemById", {id}).then((res: any) => {
      form.value = res
    })
  }
})
</script>
<style scoped>
.btn-group {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>