|
|
@@ -0,0 +1,1209 @@
|
|
|
+<script setup lang="ts" name="StoreIn">
|
|
|
+import apis from "@a"
|
|
|
+import dayjs from "dayjs"
|
|
|
+import common from "./_common"
|
|
|
+import type { ToolBtn } from "@@@/table/models"
|
|
|
+import { Plus } from "@element-plus/icons-vue"
|
|
|
+import StoreInOutHeaderSelect from "@/components/modal-select/StoreInOutHeaderSelect.vue"
|
|
|
+
|
|
|
+const props = withDefaults(
|
|
|
+ defineProps<{
|
|
|
+ isAudit: boolean
|
|
|
+ actions: ("update" | "revoke" | "audit" | "reject" | "detail" | "reSubmit")[]
|
|
|
+ customBtns?: ToolBtn[]
|
|
|
+ }>(),
|
|
|
+ {
|
|
|
+ isAudit: false,
|
|
|
+ customBtns: () => {
|
|
|
+ return []
|
|
|
+ }
|
|
|
+ }
|
|
|
+)
|
|
|
+const tableRef = ref()
|
|
|
+const modalRef = ref()
|
|
|
+const detailModalRef = ref()
|
|
|
+const storeInOutHeaderSelectRef = ref()
|
|
|
+const isEdit = ref(false)
|
|
|
+const isReSubmit = ref(false)
|
|
|
+const detailForm = ref<any>({})
|
|
|
+const opts = reactive({
|
|
|
+ columns: [
|
|
|
+ { field: "id", name: "", width: 100, isSort: true, visible: false, tooltip: true },
|
|
|
+ {
|
|
|
+ field: "receiptNum",
|
|
|
+ name: "单据编号",
|
|
|
+ visible: true,
|
|
|
+ isSort: false,
|
|
|
+ width: "auto",
|
|
|
+ tooltip: true
|
|
|
+ },
|
|
|
+ { field: "receiptDate", name: "单据日期", visible: true, isSort: false, width: 185 },
|
|
|
+ { field: "businessType", name: "业务类型", visible: true, isSort: false, width: 100 },
|
|
|
+ {
|
|
|
+ field: "storeHouseName",
|
|
|
+ name: "仓库",
|
|
|
+ visible: true,
|
|
|
+ isSort: false,
|
|
|
+ width: "auto",
|
|
|
+ tooltip: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "storeType",
|
|
|
+ name: "入库种类",
|
|
|
+ visible: true,
|
|
|
+ isSort: false,
|
|
|
+ width: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "supplierName",
|
|
|
+ name: "供应商",
|
|
|
+ visible: true,
|
|
|
+ isSort: false,
|
|
|
+ width: "auto",
|
|
|
+ tooltip: true
|
|
|
+ },
|
|
|
+ //{ field: "dept", name: "部门", visible: true, isSort: false, width: "auto", tooltip: true },
|
|
|
+ {
|
|
|
+ field: "preparedUserName",
|
|
|
+ name: "制单人",
|
|
|
+ visible: true,
|
|
|
+ isSort: false,
|
|
|
+ width: "auto",
|
|
|
+ tooltip: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "auditUserName",
|
|
|
+ name: "审核人",
|
|
|
+ visible: true,
|
|
|
+ isSort: false,
|
|
|
+ width: "auto",
|
|
|
+ tooltip: true
|
|
|
+ },
|
|
|
+ { field: "auditDate", name: "审核日期", visible: true, isSort: false, width: 185 },
|
|
|
+ {
|
|
|
+ field: "status",
|
|
|
+ name: "状态",
|
|
|
+ visible: true,
|
|
|
+ isSort: false,
|
|
|
+ width: 100
|
|
|
+ },
|
|
|
+ //{ field: "remark", name: "备注", visible: true, isSort: false, tooltip: true },
|
|
|
+ { field: "actions", name: `操作`, width: 150 }
|
|
|
+ ] as any[],
|
|
|
+ queryParams: {
|
|
|
+ receiptNum: undefined,
|
|
|
+ dateRangeReceiptDate: undefined,
|
|
|
+ inBusinessType: undefined,
|
|
|
+ storeHouseId: undefined,
|
|
|
+ inStoreType: undefined,
|
|
|
+ supplierId: undefined,
|
|
|
+ dept: undefined,
|
|
|
+ preparedUser: undefined,
|
|
|
+ auditUser: undefined,
|
|
|
+ dateRangeAuditDate: undefined,
|
|
|
+ status: props.isAudit ? 1 : undefined
|
|
|
+ },
|
|
|
+ searchFormItems: [
|
|
|
+ {
|
|
|
+ field: "receiptNum",
|
|
|
+ label: "单据编号",
|
|
|
+ class: "w-100",
|
|
|
+ required: false,
|
|
|
+ placeholder: "请输入单据编号",
|
|
|
+ component: "I",
|
|
|
+ listeners: {
|
|
|
+ keyup: (e: KeyboardEvent) => {
|
|
|
+ if (e.code == "Enter") {
|
|
|
+ handleQuery()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "dateRangeReceiptDate",
|
|
|
+ label: "单据日期",
|
|
|
+ class: "w-100",
|
|
|
+ required: false,
|
|
|
+ component: "D",
|
|
|
+ placeholder: "请选择单据日期",
|
|
|
+ props: {
|
|
|
+ type: "daterange",
|
|
|
+ valueFormat: "YYYY-MM-DD",
|
|
|
+ rangeSeparator: "-",
|
|
|
+ startPlaceholder: "开始日期",
|
|
|
+ endPlaceholder: "结束日期"
|
|
|
+ },
|
|
|
+ listeners: {
|
|
|
+ change: (v: any) => {
|
|
|
+ queryParams.value.dateRangeReceiptDate = v
|
|
|
+ handleQuery()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ span: 5
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "inBusinessType",
|
|
|
+ label: "业务类型",
|
|
|
+ class: "w-100",
|
|
|
+ required: false,
|
|
|
+ component: "Dict",
|
|
|
+ props: {
|
|
|
+ placeholder: "请选择业务类型",
|
|
|
+ dictType: "in_business_type",
|
|
|
+ valueIsNumber: 1,
|
|
|
+ type: "select"
|
|
|
+ },
|
|
|
+ listeners: {
|
|
|
+ change: () => {
|
|
|
+ handleQuery()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "storeHouseId",
|
|
|
+ label: "仓库",
|
|
|
+ class: "w-100",
|
|
|
+ required: false,
|
|
|
+ placeholder: "请输入",
|
|
|
+ component: "VS",
|
|
|
+ props: {
|
|
|
+ data: () => common.storeHouseOptions,
|
|
|
+ type: "select",
|
|
|
+ valueIsNumber: 1
|
|
|
+ },
|
|
|
+ listeners: {
|
|
|
+ keyup: (e: KeyboardEvent) => {
|
|
|
+ if (e.code == "Enter") {
|
|
|
+ handleQuery()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "inStoreType",
|
|
|
+ label: "入库种类",
|
|
|
+ class: "w-100",
|
|
|
+ required: false,
|
|
|
+ component: "Dict",
|
|
|
+ props: {
|
|
|
+ placeholder: "请选择入库种类",
|
|
|
+ dictType: "in_store_type",
|
|
|
+ valueIsNumber: 1,
|
|
|
+ type: "select"
|
|
|
+ },
|
|
|
+ listeners: {
|
|
|
+ change: () => {
|
|
|
+ handleQuery()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "supplierId",
|
|
|
+ label: "供应商",
|
|
|
+ class: "w-100",
|
|
|
+ required: false,
|
|
|
+ placeholder: "请输入供应商",
|
|
|
+ component: "VS",
|
|
|
+ props: {
|
|
|
+ data: () => common.supplierOptions,
|
|
|
+ type: "select",
|
|
|
+ valueIsNumber: 1
|
|
|
+ },
|
|
|
+ listeners: {
|
|
|
+ keyup: (e: KeyboardEvent) => {
|
|
|
+ if (e.code == "Enter") {
|
|
|
+ handleQuery()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "status",
|
|
|
+ label: "状态",
|
|
|
+ class: "w-100",
|
|
|
+ required: false,
|
|
|
+ component: "Dict",
|
|
|
+ props: {
|
|
|
+ placeholder: "请选择状态",
|
|
|
+ dictType: "store_in_out_status",
|
|
|
+ valueIsNumber: 1,
|
|
|
+ type: "select"
|
|
|
+ },
|
|
|
+ listeners: {
|
|
|
+ change: () => {
|
|
|
+ handleQuery()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ] as any,
|
|
|
+ permission: "erp:storeIn",
|
|
|
+ handleBtns: [],
|
|
|
+ handleFuns: {
|
|
|
+ handleCreate,
|
|
|
+ handleUpdate: () => {
|
|
|
+ const row = tableRef.value.getSelected()
|
|
|
+ handleUpdate(row)
|
|
|
+ },
|
|
|
+ handleDelete: () => {
|
|
|
+ const rows = tableRef.value.getSelecteds()
|
|
|
+ handleDelete(rows)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ customBtns: [],
|
|
|
+ tableListFun: apis.erp.storeInApi.list,
|
|
|
+ getEntityFun: apis.erp.storeInApi.get,
|
|
|
+ deleteEntityFun: apis.erp.storeInApi.del,
|
|
|
+ exportUrl: apis.erp.storeInApi.exportUrl,
|
|
|
+ exportName: "StoreIn",
|
|
|
+ modalTitle: "入库信息管理",
|
|
|
+ formItems: [
|
|
|
+ {
|
|
|
+ field: "receiptNum",
|
|
|
+ label: "单据编号",
|
|
|
+ class: "w-100",
|
|
|
+ span: 8,
|
|
|
+ required: true,
|
|
|
+ placeholder: "请输入单据编号",
|
|
|
+ component: "I"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "receiptDate",
|
|
|
+ label: "单据日期",
|
|
|
+ class: "w-100",
|
|
|
+ span: 8,
|
|
|
+ required: true,
|
|
|
+ component: "D",
|
|
|
+ props: {
|
|
|
+ placeholder: "请选择单据日期",
|
|
|
+ type: "date",
|
|
|
+ valueFormat: "YYYY-MM-DD"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "businessType",
|
|
|
+ label: "业务类型",
|
|
|
+ span: 8,
|
|
|
+ class: "w-100",
|
|
|
+ required: true,
|
|
|
+ component: "Dict",
|
|
|
+ props: {
|
|
|
+ placeholder: "请选择入库业务类型",
|
|
|
+ dictType: "in_business_type",
|
|
|
+ type: "select",
|
|
|
+ valueIsNumber: 1
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "storeHouseId",
|
|
|
+ label: "仓库",
|
|
|
+ span: 8,
|
|
|
+ class: "w-100",
|
|
|
+ required: true,
|
|
|
+ placeholder: "请输入",
|
|
|
+ component: "VS",
|
|
|
+ props: {
|
|
|
+ data: () => common.storeHouseOptions,
|
|
|
+ type: "select",
|
|
|
+ valueIsNumber: 1
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "storeType",
|
|
|
+ label: "入库种类",
|
|
|
+ class: "w-100",
|
|
|
+ span: 8,
|
|
|
+ required: true,
|
|
|
+ component: "Dict",
|
|
|
+ props: {
|
|
|
+ placeholder: "请选择入库种类",
|
|
|
+ dictType: "in_store_type",
|
|
|
+ type: "select",
|
|
|
+ valueIsNumber: 1
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "supplierId",
|
|
|
+ label: "供应商",
|
|
|
+ class: "w-100",
|
|
|
+ span: 8,
|
|
|
+ required: true,
|
|
|
+ placeholder: "请输入供应商",
|
|
|
+ component: "VS",
|
|
|
+ props: {
|
|
|
+ data: () => common.supplierOptions,
|
|
|
+ type: "select",
|
|
|
+ valueIsNumber: 1
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // field: "dept",
|
|
|
+ // label: "部门",
|
|
|
+ // span: 12,
|
|
|
+ // class: "w-100",
|
|
|
+ // required: false,
|
|
|
+ // placeholder: "请输入部门",
|
|
|
+ // component: "I"
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // field: "preparedUser",
|
|
|
+ // label: "制单人",
|
|
|
+ // class: "w-100",
|
|
|
+ // required: false,
|
|
|
+ // placeholder: "请输入制单人",
|
|
|
+ // component: "VS",
|
|
|
+ // props: {
|
|
|
+ // data: () => common.storeMangageListOptions,
|
|
|
+ // type: "select",
|
|
|
+ // valueIsNumber: 1
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // field: "auditUser",
|
|
|
+ // label: "审核人",
|
|
|
+ // class: "w-100",
|
|
|
+ // required: false,
|
|
|
+ // placeholder: "请输入审核人",
|
|
|
+ // component: "VS",
|
|
|
+ // props: {
|
|
|
+ // data: () => common.storeMangageListOptions,
|
|
|
+ // type: "select",
|
|
|
+ // valueIsNumber: 1
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // field: "auditDate",
|
|
|
+ // label: "审核日期",
|
|
|
+ // class: "w-100",
|
|
|
+ // required: false,
|
|
|
+ // component: "D",
|
|
|
+ // props: {
|
|
|
+ // placeholder: "请选择审核日期",
|
|
|
+ // type: "date",
|
|
|
+ // valueFormat: "YYYY-MM-DD"
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // field: "status",
|
|
|
+ // label: "状态",
|
|
|
+ // class: "w-100",
|
|
|
+ // required: true,
|
|
|
+ // component: "Dict",
|
|
|
+ // props: {
|
|
|
+ // dictType: "store_in_out_status",
|
|
|
+ // type: "radio",
|
|
|
+ // valueIsNumber: 1
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ field: "itemInfo",
|
|
|
+ label: "入库详情",
|
|
|
+ class: "w-100",
|
|
|
+ required: true,
|
|
|
+ placeholder: "请输入入库详情",
|
|
|
+ component: "slot",
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ validator: (rule: any, value: any, callback: any) => {
|
|
|
+ if (!value || value.length === 0) {
|
|
|
+ callback(new Error("请至少添加一条入库明细"))
|
|
|
+ } else {
|
|
|
+ const valid = value.every(
|
|
|
+ (item: any) =>
|
|
|
+ item.itemName && item.unitId && item.quantity && item.taxInclusivePrice
|
|
|
+ )
|
|
|
+ if (!valid) {
|
|
|
+ callback(new Error("请完善所有入库明细项"))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ trigger: "blur"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ] as any,
|
|
|
+ resetForm: () => {
|
|
|
+ form.value = emptyFormData.value
|
|
|
+ },
|
|
|
+ labelWidth: "80px",
|
|
|
+ emptyFormData: {
|
|
|
+ id: undefined,
|
|
|
+ receiptNum: undefined,
|
|
|
+ receiptDate: undefined,
|
|
|
+ businessType: undefined,
|
|
|
+ storeHouseId: undefined,
|
|
|
+ storeType: undefined,
|
|
|
+ supplierId: undefined,
|
|
|
+ dept: undefined,
|
|
|
+ preparedUser: undefined,
|
|
|
+ auditUser: undefined,
|
|
|
+ auditDate: undefined,
|
|
|
+ status: 0,
|
|
|
+ remark: undefined,
|
|
|
+ itemInfo: [] as any[]
|
|
|
+ }
|
|
|
+})
|
|
|
+const { queryParams, emptyFormData } = toRefs(opts)
|
|
|
+const form = ref<any>(emptyFormData.value)
|
|
|
+if (props.isAudit) {
|
|
|
+ opts.customBtns = [
|
|
|
+ {
|
|
|
+ name: "审核",
|
|
|
+ permission: "erp:storeIn:audit",
|
|
|
+ clickFun: () => {
|
|
|
+ const rows = tableRef.value.getSelecteds()
|
|
|
+ if (rows.length !== 1) {
|
|
|
+ message.msgWarning("请选择一条数据进行审核")
|
|
|
+ return
|
|
|
+ }
|
|
|
+ handleAudit(rows[0])
|
|
|
+ },
|
|
|
+ icon: "bi bi-check-circle"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "拒绝入库",
|
|
|
+ permission: "erp:storeIn:reject",
|
|
|
+ clickFun: () => {
|
|
|
+ const rows = tableRef.value.getSelecteds()
|
|
|
+ if (rows.length !== 1) {
|
|
|
+ message.msgWarning("请选择一条数据进行拒绝")
|
|
|
+ return
|
|
|
+ }
|
|
|
+ handleReject(rows[0])
|
|
|
+ },
|
|
|
+ icon: "bi bi-x-circle"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+} else {
|
|
|
+ opts.customBtns = [
|
|
|
+ {
|
|
|
+ name: "新增入库",
|
|
|
+ permission: "erp:storeIn:add",
|
|
|
+ clickFun: () => {
|
|
|
+ handleCreate()
|
|
|
+ },
|
|
|
+ icon: "bi bi-plus-square",
|
|
|
+ btnClass: "btn btn-light-info",
|
|
|
+ disabledFun: (c) => {
|
|
|
+ return false // 非审核页面不禁用
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "修改入库",
|
|
|
+ permission: "erp:storeIn:update",
|
|
|
+ clickFun: () => {
|
|
|
+ const row = tableRef.value.getSelected()
|
|
|
+ handleUpdate(row)
|
|
|
+ },
|
|
|
+ icon: "bi bi-arrow-bar-up",
|
|
|
+ btnClass: "btn btn-light-success",
|
|
|
+ disabledFun: (c) => {
|
|
|
+ return c !== 1
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // {
|
|
|
+ // name: "撤销",
|
|
|
+ // permission: "erp:storeIn:revoke",
|
|
|
+ // clickFun: () => {
|
|
|
+ // const rows = tableRef.value.getSelecteds()
|
|
|
+ // if (rows.length !== 1) {
|
|
|
+ // message.msgWarning("请选择一条数据进行撤销")
|
|
|
+ // return
|
|
|
+ // }
|
|
|
+ // handleRevoke(rows[0])
|
|
|
+ // },
|
|
|
+ // icon: "bi bi-trash",
|
|
|
+ // btnClass: "btn btn-light-danger",
|
|
|
+ // disabledFun: (c) => {
|
|
|
+ // return c !== 1
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ ]
|
|
|
+}
|
|
|
+
|
|
|
+// 入库物品明细相关变量和方法
|
|
|
+const itemLoading = ref(false) // 物品搜索加载状态
|
|
|
+
|
|
|
+// 查询物品列表用于autocomplete
|
|
|
+const queryItems = (queryString: string, cb: (results: any[]) => void) => {
|
|
|
+ if (!queryString) {
|
|
|
+ cb([])
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ itemLoading.value = true
|
|
|
+ apis.erp.itemInfoApi
|
|
|
+ .autoComplete(queryString)
|
|
|
+ .then((res: any) => {
|
|
|
+ itemLoading.value = false
|
|
|
+ const results = res.data.map((item: any) => {
|
|
|
+ return {
|
|
|
+ value: item.itemName,
|
|
|
+ ...item
|
|
|
+ }
|
|
|
+ })
|
|
|
+ cb(results)
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ itemLoading.value = false
|
|
|
+ cb([])
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 添加一行明细
|
|
|
+const addItemInfo = () => {
|
|
|
+ if (!form.value.itemInfo) {
|
|
|
+ form.value.itemInfo = []
|
|
|
+ }
|
|
|
+ form.value.itemInfo.push({
|
|
|
+ itemId: undefined,
|
|
|
+ itemName: "",
|
|
|
+ specModel: "",
|
|
|
+ unitId: undefined,
|
|
|
+ unitName: "",
|
|
|
+ quantity: undefined,
|
|
|
+ taxRate: undefined,
|
|
|
+ taxInclusivePrice: undefined,
|
|
|
+ taxInclusiveAmount: undefined
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 删除一行明细
|
|
|
+const removeItemInfo = (index: number) => {
|
|
|
+ if (form.value.itemInfo && form.value.itemInfo.length > index) {
|
|
|
+ form.value.itemInfo.splice(index, 1)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 当选择物品时更新相关信息
|
|
|
+const handleItemSelect = (item: any, index: number) => {
|
|
|
+ if (form.value.itemInfo && form.value.itemInfo[index]) {
|
|
|
+ form.value.itemInfo[index].itemId = item.id
|
|
|
+ form.value.itemInfo[index].itemName = item.itemName
|
|
|
+ form.value.itemInfo[index].specModel = item.specModel
|
|
|
+ form.value.itemInfo[index].unitId = item.unitId
|
|
|
+ // 查找单位名称
|
|
|
+ const unit = common.unitInfoOptions.find((u: any) => u.value === item.unitId)
|
|
|
+ if (unit) {
|
|
|
+ form.value.itemInfo[index].unitName = unit.label
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 计算含税金额
|
|
|
+const calculateTaxInclusiveAmount = (index: number) => {
|
|
|
+ if (form.value.itemInfo && form.value.itemInfo[index]) {
|
|
|
+ const item = form.value.itemInfo[index]
|
|
|
+ if (item.quantity && item.taxInclusivePrice) {
|
|
|
+ item.taxInclusiveAmount = item.quantity * item.taxInclusivePrice
|
|
|
+ } else {
|
|
|
+ item.taxInclusiveAmount = undefined
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/** 再次编辑提交按钮操作 */
|
|
|
+function handleResubmit(row: any) {
|
|
|
+ isEdit.value = true
|
|
|
+ isReSubmit.value = true
|
|
|
+
|
|
|
+ tableRef.value.defaultHandleFuns.handleUpdate("", row)
|
|
|
+}
|
|
|
+
|
|
|
+/** 搜索按钮操作 */
|
|
|
+function handleQuery(query?: any) {
|
|
|
+ query = query || tableRef.value?.getQueryParams() || queryParams.value
|
|
|
+ addDateRange(query, query.dateRangeAuditDate, "AuditDate")
|
|
|
+ addDateRange(query, query.dateRangeCreateTime)
|
|
|
+ addDateRange(query, query.dateRangeUpdateTime, "UpdateTime")
|
|
|
+ tableRef.value?.query(query)
|
|
|
+}
|
|
|
+
|
|
|
+/** 重置按钮操作 */
|
|
|
+function resetQuery(query?: any) {
|
|
|
+ query = query || tableRef.value?.getQueryParams() || queryParams.value
|
|
|
+ query.dateRangeAuditDate = [] as any
|
|
|
+ addDateRange(query, query.dateRangeAuditDate, "AuditDate")
|
|
|
+ query.dateRangeCreateTime = [] as any
|
|
|
+ addDateRange(query, query.dateRangeCreateTime)
|
|
|
+ query.dateRangeUpdateTime = [] as any
|
|
|
+ addDateRange(query, query.dateRangeUpdateTime, "UpdateTime")
|
|
|
+ //
|
|
|
+}
|
|
|
+function handleCreate() {
|
|
|
+ isEdit.value = false
|
|
|
+ tableRef.value.defaultHandleFuns.handleCreate()
|
|
|
+}
|
|
|
+/** 修改按钮操作 */
|
|
|
+function handleUpdate(row: any) {
|
|
|
+ isEdit.value = true
|
|
|
+ isReSubmit.value = false
|
|
|
+ if (row.status === 2 || row.status === 4) {
|
|
|
+ message.msgWarning("已审核通过或者作废的入库单不能修改")
|
|
|
+ return
|
|
|
+ }
|
|
|
+ tableRef.value.defaultHandleFuns.handleUpdate("", row)
|
|
|
+}
|
|
|
+
|
|
|
+/** 删除按钮操作 */
|
|
|
+function handleDelete(rows: any[]) {
|
|
|
+ tableRef.value.defaultHandleFuns.handleDelete("", rows)
|
|
|
+}
|
|
|
+
|
|
|
+/** 审核按钮操作 */
|
|
|
+function handleAudit(row: any) {
|
|
|
+ // 实现审核逻辑
|
|
|
+ console.log("审核入库单", row)
|
|
|
+ if (row.status !== 1) {
|
|
|
+ message.msgWarning("只有待审核的入库单才能审核!")
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // 这里应该调用审核API
|
|
|
+ message
|
|
|
+ .confirm("是否确认审核当前单据?", "确认审核", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning"
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ apis.erp.storeInApi.audit(row.id).then(() => {
|
|
|
+ handleQuery()
|
|
|
+ })
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+/** 拒绝入库按钮操作 */
|
|
|
+function handleReject(row: any) {
|
|
|
+ // 实现拒绝逻辑
|
|
|
+ if (row.status !== 1) {
|
|
|
+ message.msgWarning("只有待审核的入库单才能拒绝!")
|
|
|
+ return
|
|
|
+ }
|
|
|
+ message
|
|
|
+ .confirm("是否确认拒绝当前单据?", "确认拒绝", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning"
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ apis.erp.storeInApi.reject(row.id).then(() => {
|
|
|
+ message.msgSuccess("拒绝成功")
|
|
|
+ handleQuery()
|
|
|
+ })
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+function handleRevoke(row: any) {
|
|
|
+ // 实现撤销逻辑
|
|
|
+ console.log("撤销入库单", row)
|
|
|
+ // 这里应该调用撤销API
|
|
|
+ message
|
|
|
+ .confirm("是否确认撤销当前单据?", "确认撤销", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning"
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ apis.erp.storeInApi.revoke(row.id).then(() => {
|
|
|
+ handleQuery()
|
|
|
+ })
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+/** 提交按钮 */
|
|
|
+function submitForm() {
|
|
|
+ console.log("提交入库单", form.value)
|
|
|
+ if (isReSubmit.value) {
|
|
|
+ // 设置状态为1(待审核)
|
|
|
+ form.value.status = 1
|
|
|
+ }
|
|
|
+ apis.erp.storeInApi.addOrUpdate(form.value).then(() => {
|
|
|
+ handleQuery()
|
|
|
+ })
|
|
|
+}
|
|
|
+function handleStoreInOutHeaderSelect() {
|
|
|
+ storeInOutHeaderSelectRef.value.open()
|
|
|
+}
|
|
|
+function handleStoreInOutHeaderSelectConfirm(ids: any[]) {
|
|
|
+ console.log("选择入库单", ids)
|
|
|
+ //form.value.receiptNum = ids[0].receiptNum
|
|
|
+ if (ids[0] && ids[0].id) {
|
|
|
+ apis.erp.storeInApi.get(ids[0].id).then((res: any) => {
|
|
|
+ form.value = res.data
|
|
|
+ form.value.id = undefined
|
|
|
+ form.value.itemInfo.forEach((item: any) => {
|
|
|
+ item.id = undefined
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/** 查看详情按钮操作 */
|
|
|
+function handleDetail(row: any) {
|
|
|
+ // 获取完整的入库单详情数据
|
|
|
+ apis.erp.storeInApi.get(row.id).then((res: any) => {
|
|
|
+ detailForm.value = res.data
|
|
|
+ // 打开详情模态框
|
|
|
+ detailModalRef.value.show()
|
|
|
+ })
|
|
|
+}
|
|
|
+</script>
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <VbDataTable
|
|
|
+ ref="tableRef"
|
|
|
+ keyField="id"
|
|
|
+ :columns="opts.columns"
|
|
|
+ :handle-perm="opts.permission"
|
|
|
+ :handle-btns="opts.handleBtns"
|
|
|
+ :handle-funs="opts.handleFuns"
|
|
|
+ :search-form-items="opts.searchFormItems"
|
|
|
+ :custom-btns="opts.customBtns"
|
|
|
+ :remote-fun="opts.tableListFun"
|
|
|
+ :get-entity-fun="opts.getEntityFun"
|
|
|
+ :delete-entity-fun="opts.deleteEntityFun"
|
|
|
+ :export-url="opts.exportUrl"
|
|
|
+ :export-name="opts.exportName"
|
|
|
+ :modal="modalRef"
|
|
|
+ :reset-form-fun="opts.resetForm"
|
|
|
+ v-model:form-data="form"
|
|
|
+ v-model:query-params="queryParams"
|
|
|
+ :check-multiple="true"
|
|
|
+ :reset-search-form-fun="resetQuery"
|
|
|
+ :custom-search-fun="handleQuery">
|
|
|
+ <template #receiptDate="{ row }">
|
|
|
+ {{ dayjs(row.receiptDate).format("YYYY-MM-DD") }}
|
|
|
+ </template>
|
|
|
+ <template #businessType="{ row }">
|
|
|
+ <DictTag type="in_business_type" :value-is-number="1" :value="row.businessType"></DictTag>
|
|
|
+ </template>
|
|
|
+ <template #storeType="{ row }">
|
|
|
+ <DictTag type="in_store_type" :value-is-number="1" :value="row.storeType"></DictTag>
|
|
|
+ </template>
|
|
|
+ <template #auditDate="{ row }">
|
|
|
+ {{ dayjs(row.auditDate).isValid() ? dayjs(row.auditDate).format("YYYY-MM-DD") : "-" }}
|
|
|
+ </template>
|
|
|
+ <template #status="{ row }">
|
|
|
+ <DictTag type="store_in_out_status" :value-is-number="1" :value="row.status"></DictTag>
|
|
|
+ </template>
|
|
|
+ <template #actions="{ row }">
|
|
|
+ <!-- 非审核页面显示修改和删除按钮 -->
|
|
|
+ <template v-if="!isAudit">
|
|
|
+ <vb-tooltip
|
|
|
+ content="修改"
|
|
|
+ placement="top"
|
|
|
+ v-if="actions.includes('update') && row.status !== 2 && row.status !== 4">
|
|
|
+ <el-button
|
|
|
+ link
|
|
|
+ type="primary"
|
|
|
+ @click="handleUpdate(row)"
|
|
|
+ v-hasPermission="'erp:storeIn:edit'">
|
|
|
+ <template #icon>
|
|
|
+ <VbIcon icon-name="notepad-edit" icon-type="duotone" class="fs-3"></VbIcon>
|
|
|
+ </template>
|
|
|
+ </el-button>
|
|
|
+ </vb-tooltip>
|
|
|
+ <vb-tooltip
|
|
|
+ content="作废"
|
|
|
+ placement="top"
|
|
|
+ v-if="actions.includes('revoke') && (row.status === 1 || row.status === 3)">
|
|
|
+ <el-button
|
|
|
+ link
|
|
|
+ type="primary"
|
|
|
+ @click="handleRevoke(row)"
|
|
|
+ v-hasPermission="'erp:storeIn:revoke'">
|
|
|
+ <template #icon>
|
|
|
+ <VbIcon
|
|
|
+ icon-name="trash-square"
|
|
|
+ icon-type="duotone"
|
|
|
+ class="fs-3 text-danger"></VbIcon>
|
|
|
+ </template>
|
|
|
+ </el-button>
|
|
|
+ </vb-tooltip>
|
|
|
+ <vb-tooltip
|
|
|
+ content="重新提交审核"
|
|
|
+ placement="top"
|
|
|
+ v-if="actions.includes('reSubmit') && row.status === 3">
|
|
|
+ <el-button
|
|
|
+ link
|
|
|
+ type="primary"
|
|
|
+ @click="handleResubmit(row)"
|
|
|
+ v-hasPermission="'erp:storeIn:edit'">
|
|
|
+ <template #icon>
|
|
|
+ <VbIcon icon-name="abstract-37" icon-type="solid" class="text-success"></VbIcon>
|
|
|
+ </template>
|
|
|
+ </el-button>
|
|
|
+ </vb-tooltip>
|
|
|
+ <vb-tooltip content="查看详情" placement="top" v-if="actions.includes('detail')">
|
|
|
+ <el-button
|
|
|
+ link
|
|
|
+ type="info"
|
|
|
+ @click="handleDetail(row)"
|
|
|
+ v-hasPermission="'erp:storeIn:detail'">
|
|
|
+ <template #icon>
|
|
|
+ <VbIcon icon-name="eye" icon-type="duotone" class="fs-3"></VbIcon>
|
|
|
+ </template>
|
|
|
+ </el-button>
|
|
|
+ </vb-tooltip>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 审核页面显示审核和拒绝入库按钮 -->
|
|
|
+ <template v-else>
|
|
|
+ <vb-tooltip
|
|
|
+ content="审核"
|
|
|
+ placement="top"
|
|
|
+ v-if="actions.includes('audit') && row.status !== 2">
|
|
|
+ <el-button
|
|
|
+ link
|
|
|
+ type="primary"
|
|
|
+ @click="handleAudit(row)"
|
|
|
+ v-hasPermission="'erp:storeIn:audit'">
|
|
|
+ <template #icon>
|
|
|
+ <VbIcon icon-name="check-circle" icon-type="duotone" class="fs-3"></VbIcon>
|
|
|
+ </template>
|
|
|
+ </el-button>
|
|
|
+ </vb-tooltip>
|
|
|
+ <vb-tooltip
|
|
|
+ content="拒绝入库"
|
|
|
+ placement="top"
|
|
|
+ v-if="actions.includes('reject') && row.status !== 2">
|
|
|
+ <el-button
|
|
|
+ link
|
|
|
+ type="danger"
|
|
|
+ @click="handleReject(row)"
|
|
|
+ v-hasPermission="'erp:storeIn:reject'">
|
|
|
+ <template #icon>
|
|
|
+ <VbIcon icon-name="abstract-11" icon-type="solid" class="text-danger"></VbIcon>
|
|
|
+ </template>
|
|
|
+ </el-button>
|
|
|
+ </vb-tooltip>
|
|
|
+ <vb-tooltip content="查看详情" placement="top" v-if="actions.includes('detail')">
|
|
|
+ <el-button
|
|
|
+ link
|
|
|
+ type="info"
|
|
|
+ @click="handleDetail(row)"
|
|
|
+ v-hasPermission="'erp:storeIn:query'">
|
|
|
+ <template #icon>
|
|
|
+ <VbIcon icon-name="eye" icon-type="duotone" class="fs-3"></VbIcon>
|
|
|
+ </template>
|
|
|
+ </el-button>
|
|
|
+ </vb-tooltip>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </VbDataTable>
|
|
|
+ <VbModal
|
|
|
+ v-model:modal="modalRef"
|
|
|
+ :title="opts.modalTitle"
|
|
|
+ :form-data="form"
|
|
|
+ modalDialogStyle="max-width:1200px;"
|
|
|
+ :form-items="opts.formItems"
|
|
|
+ :label-width="opts.labelWidth"
|
|
|
+ :confirm-btn-text="isReSubmit ? '重新提交审核' : '提交'"
|
|
|
+ append-to-body
|
|
|
+ @confirm="submitForm">
|
|
|
+ <template #title>
|
|
|
+ <div class="modal-title-container">
|
|
|
+ <span class="modal-title-text">{{ isEdit ? "修改" : "新增" }}</span>
|
|
|
+ <el-button
|
|
|
+ v-if="!isEdit"
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ @click="handleStoreInOutHeaderSelect"
|
|
|
+ class="p-5 template-btn">
|
|
|
+ <VbIcon icon-name="plus-circle" icon-type="solid" class="fs-3"></VbIcon>
|
|
|
+ 选择入库单模板
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #itemInfo_form>
|
|
|
+ <div class="item-info-table">
|
|
|
+ <el-button type="primary" size="small" @click="addItemInfo" class="mb-2">
|
|
|
+ <el-icon><Plus /></el-icon>
|
|
|
+ 添加物品
|
|
|
+ </el-button>
|
|
|
+
|
|
|
+ <el-table :data="form.itemInfo" border style="width: 100%">
|
|
|
+ <el-table-column type="index" label="#" width="50"></el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="物品名称" width="200">
|
|
|
+ <template #default="{ row, $index }">
|
|
|
+ <el-autocomplete
|
|
|
+ v-model="row.itemName"
|
|
|
+ :fetch-suggestions="queryItems"
|
|
|
+ :loading="itemLoading"
|
|
|
+ placeholder="请输入物品名称"
|
|
|
+ @select="(item) => handleItemSelect(item, $index)"
|
|
|
+ clearable
|
|
|
+ style="width: 100%"
|
|
|
+ :rules="[{ required: true, message: '物品名称不能为空', trigger: 'blur' }]">
|
|
|
+ <template #default="{ item }">
|
|
|
+ <div>{{ item.itemName }}</div>
|
|
|
+ <div class="text-muted">{{ item.specModel }}</div>
|
|
|
+ </template>
|
|
|
+ </el-autocomplete>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column prop="specModel" label="规格型号" width="150"></el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="计量单位" width="120">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <!-- <el-select
|
|
|
+ v-model="row.unitId"
|
|
|
+ placeholder="请选择单位"
|
|
|
+ disabled
|
|
|
+ :rules="[{ required: true, message: '计量单位不能为空', trigger: 'blur' }]">
|
|
|
+ <el-option
|
|
|
+ v-for="item in common.unitInfoOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"></el-option>
|
|
|
+ </el-select> -->
|
|
|
+
|
|
|
+ <!-- <vb-select
|
|
|
+ v-if="row.isAdd"
|
|
|
+ v-model="row.unitId"
|
|
|
+ :data="common.unitInfoOptions"
|
|
|
+ :value-is-number="false"
|
|
|
+ placeholder="请选择单位"></vb-select> -->
|
|
|
+ <span>{{ row.unitName }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="实收数量" width="120">
|
|
|
+ <template #default="{ row, $index }">
|
|
|
+ <el-input-number
|
|
|
+ v-model="row.quantity"
|
|
|
+ @change="calculateTaxInclusiveAmount($index)"
|
|
|
+ :min="0"
|
|
|
+ controls-position="right"
|
|
|
+ style="width: 100%"
|
|
|
+ :rules="[
|
|
|
+ { required: true, message: '实收数量不能为空', trigger: 'blur' },
|
|
|
+ { type: 'number', min: 0.01, message: '实收数量必须大于0', trigger: 'blur' }
|
|
|
+ ]"></el-input-number>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="税率%" width="100">
|
|
|
+ <template #default="{ row, $index }">
|
|
|
+ <el-input-number
|
|
|
+ v-model="row.taxRate"
|
|
|
+ @change="calculateTaxInclusiveAmount($index)"
|
|
|
+ :min="0"
|
|
|
+ :max="100"
|
|
|
+ :step="0.1"
|
|
|
+ controls-position="right"
|
|
|
+ style="width: 100%"></el-input-number>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="含税单价" width="120">
|
|
|
+ <template #default="{ row, $index }">
|
|
|
+ <el-input-number
|
|
|
+ v-model="row.taxInclusivePrice"
|
|
|
+ @change="calculateTaxInclusiveAmount($index)"
|
|
|
+ :min="0"
|
|
|
+ :step="0.01"
|
|
|
+ controls-position="right"
|
|
|
+ style="width: 100%"
|
|
|
+ :rules="[
|
|
|
+ { required: true, message: '含税单价不能为空', trigger: 'blur' },
|
|
|
+ { type: 'number', min: 0.01, message: '含税单价必须大于0', trigger: 'blur' }
|
|
|
+ ]"></el-input-number>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ label="含税金额"
|
|
|
+ prop="taxInclusiveAmount"
|
|
|
+ width="120"></el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="操作" width="80">
|
|
|
+ <template #default="{ $index }">
|
|
|
+ <el-button type="danger" size="small" @click="removeItemInfo($index)">
|
|
|
+ 删除
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </VbModal>
|
|
|
+
|
|
|
+ <!-- 详情查看模态框 -->
|
|
|
+ <VbModal
|
|
|
+ v-model:modal="detailModalRef"
|
|
|
+ title="入库单详情"
|
|
|
+ modalDialogStyle="max-width:1200px;"
|
|
|
+ :label-width="opts.labelWidth"
|
|
|
+ append-to-body
|
|
|
+ :show-confirm-btn="false">
|
|
|
+ <template #title>
|
|
|
+ <div class="modal-title-container">
|
|
|
+ <span class="modal-title-text">入库单详情</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #body>
|
|
|
+ <div class="header-info">
|
|
|
+ <div class="header-item">
|
|
|
+ <span class="header-label">单据编号:</span>
|
|
|
+ <span class="header-value">{{ detailForm.receiptNum }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="header-item">
|
|
|
+ <span class="header-label">单据日期:</span>
|
|
|
+ <span class="header-value">
|
|
|
+ {{ dayjs(detailForm.receiptDate).format("YYYY-MM-DD") }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="header-item">
|
|
|
+ <span class="header-label">业务类型:</span>
|
|
|
+ <span class="header-value">
|
|
|
+ <DictTag
|
|
|
+ type="in_business_type"
|
|
|
+ :value-is-number="1"
|
|
|
+ :value="detailForm.businessType"></DictTag>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="header-item">
|
|
|
+ <span class="header-label">入库种类:</span>
|
|
|
+ <span class="header-value">
|
|
|
+ <DictTag
|
|
|
+ type="in_store_type"
|
|
|
+ :value-is-number="1"
|
|
|
+ :value="detailForm.storeType"></DictTag>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="header-item">
|
|
|
+ <span class="header-label">入库单状态:</span>
|
|
|
+ <span class="header-value">
|
|
|
+ <DictTag
|
|
|
+ type="store_in_out_status"
|
|
|
+ :value-is-number="1"
|
|
|
+ :value="detailForm.status"></DictTag>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="header-item">
|
|
|
+ <span class="header-label">供应商:</span>
|
|
|
+ <span class="header-value">{{ detailForm.supplierName }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="header-item">
|
|
|
+ <span class="header-label">仓库:</span>
|
|
|
+ <span class="header-value">{{ detailForm.storeHouseName }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item-info-table">
|
|
|
+ <el-table :data="detailForm.itemInfo" border style="width: 100%">
|
|
|
+ <el-table-column type="index" label="#" width="50"></el-table-column>
|
|
|
+ <el-table-column prop="itemName" label="物品名称" width="200"></el-table-column>
|
|
|
+ <el-table-column prop="specModel" label="规格型号" width="250"></el-table-column>
|
|
|
+ <el-table-column prop="unitName" label="计量单位" width="150"></el-table-column>
|
|
|
+ <el-table-column prop="quantity" label="实收数量" width="150"></el-table-column>
|
|
|
+ <el-table-column prop="taxRate" label="税率%" width="120"></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="taxInclusivePrice"
|
|
|
+ label="含税单价"
|
|
|
+ width="120"></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="taxInclusiveAmount"
|
|
|
+ label="含税金额"
|
|
|
+ width="120"></el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </VbModal>
|
|
|
+
|
|
|
+ <StoreInOutHeaderSelect
|
|
|
+ ref="storeInOutHeaderSelectRef"
|
|
|
+ :multiple="false"
|
|
|
+ :in-out-store="0"
|
|
|
+ :show-tag="false"
|
|
|
+ @confirm="handleStoreInOutHeaderSelectConfirm"></StoreInOutHeaderSelect>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.modal-title-container {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.modal-title-text {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-right: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.header-info {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(4, 1fr);
|
|
|
+ gap: 16px;
|
|
|
+ padding: 20px;
|
|
|
+ background-color: #f5f7fa;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.item-info-table {
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.header-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 4px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.header-label {
|
|
|
+ font-weight: bold;
|
|
|
+ color: #606266;
|
|
|
+ width: 90px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.header-value {
|
|
|
+ color: #303133;
|
|
|
+ flex: 1;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 响应式布局 */
|
|
|
+@media (max-width: 1200px) {
|
|
|
+ .header-info {
|
|
|
+ grid-template-columns: repeat(3, 1fr);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 992px) {
|
|
|
+ .header-info {
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 768px) {
|
|
|
+ .header-info {
|
|
|
+ grid-template-columns: 1fr;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.template-btn {
|
|
|
+ background: linear-gradient(135deg, #409eff, #1a73e8);
|
|
|
+ border: none;
|
|
|
+ border-radius: 6px;
|
|
|
+ box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ padding: 8px 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.template-btn:hover {
|
|
|
+ background: linear-gradient(135deg, #1a73e8, #0d5bb8);
|
|
|
+ box-shadow: 0 4px 8px rgba(64, 158, 255, 0.4);
|
|
|
+ transform: translateY(-1px);
|
|
|
+}
|
|
|
+
|
|
|
+.template-btn:active {
|
|
|
+ transform: translateY(1px);
|
|
|
+}
|
|
|
+</style>
|