|
@@ -23,46 +23,44 @@
|
|
|
</el-row>
|
|
|
|
|
|
<div class="md-content">
|
|
|
- <el-form :inline="true" label-position="right" :model="fromData.value" class="demo-form-inline">
|
|
|
+ <el-form :inline="true" label-position="right" :model="basicData.value" class="demo-form-inline">
|
|
|
<!-- <el-form-item label="所属组织">
|
|
|
- <el-input v-model="fromData.orgName" placeholder="所属组织"></el-input>
|
|
|
- </el-form-item> -->
|
|
|
+ <el-input v-model="basicData.orgName" placeholder="所属组织"></el-input>
|
|
|
+ </el-form-item> -->
|
|
|
<el-form-item label="物料编码">
|
|
|
- <el-input v-model="fromData.value.code" placeholder="物料编码"></el-input>
|
|
|
+ <el-input v-model="basicData.value.code" placeholder="物料编码"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="物料名称">
|
|
|
- <el-input v-model="fromData.value.name" placeholder="物料名称"></el-input>
|
|
|
+ <el-input v-model="basicData.value.name" placeholder="物料名称"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="英文名称">
|
|
|
- <el-input v-model="fromData.value.enName" placeholder="英文名称"></el-input>
|
|
|
+ <el-input v-model="basicData.value.enName" placeholder="英文名称"></el-input>
|
|
|
</el-form-item>
|
|
|
<!-- <el-form-item label="版本号">
|
|
|
- <el-input v-model="fromData.value.version" placeholder="版本号"></el-input>
|
|
|
- </el-form-item> -->
|
|
|
+ <el-input v-model="basicData.value.version" placeholder="版本号"></el-input>
|
|
|
+ </el-form-item> -->
|
|
|
|
|
|
</el-form>
|
|
|
|
|
|
- <dr-tabs :tabList="detailsTabs">
|
|
|
+ <dr-tabs :tabList="detailsTabs" :handleTabClick="handleMainTabClick">
|
|
|
<template #tabContent>
|
|
|
|
|
|
<div class="md-basic">
|
|
|
|
|
|
<!-- 主信息 -->
|
|
|
<div class="md-main">
|
|
|
- <el-form :inline="true" label-position="right" :hide-required-asterisk="true" :model="fromData.value"
|
|
|
+
|
|
|
+ <el-form :inline="true" label-position="right" :hide-required-asterisk="true" :model="basicData.value"
|
|
|
class="demo-form-inline">
|
|
|
|
|
|
<el-row :gutter="10">
|
|
|
- <el-col :span="8" v-for="f in fromData.form" style="text-align: right;">
|
|
|
- <el-form-item v-if="f.show" :label="f.name" :rules="[
|
|
|
- { required: f.required, message: '请输入', trigger: 'blur' },
|
|
|
- ]">
|
|
|
- <el-input v-model="fromData.value[f.prop]" :placeholder="f.name"></el-input>
|
|
|
+ <el-col :span="8" v-for="f in basicData.form" style="text-align: right;">
|
|
|
+ <el-form-item v-if="f.show" :label="f.name">
|
|
|
+ <el-input v-model="basicData.value[f.prop]" :placeholder="f.name"></el-input>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
|
|
|
-
|
|
|
</el-form>
|
|
|
|
|
|
</div>
|
|
@@ -70,19 +68,19 @@
|
|
|
<!-- 副信息 -->
|
|
|
<div class="md-vice">
|
|
|
|
|
|
- <dr-tabs :tabList="basicMessage">
|
|
|
+ <dr-tabs v-show="activeMainTab == 'material'" :tabList="basicMessage" :handleTabClick="handleViceTabClick">
|
|
|
|
|
|
<template #tabContent>
|
|
|
|
|
|
<el-form :inline="true" label-position="right" :hide-required-asterisk="true" :model="medcineData.value"
|
|
|
- class="demo-form-inline">
|
|
|
+ class="md-vice-content">
|
|
|
|
|
|
<el-row :gutter="10">
|
|
|
<el-col :span="8" v-for="m in medcineData.form" style="text-align: right;">
|
|
|
<el-form-item v-if="m.show" :label="m.name" :rules="[
|
|
|
{ required: m.required, message: '请输入', trigger: 'blur' },
|
|
|
]">
|
|
|
- <el-input v-model="medcineData.value[f.prop]" :placeholder="m.name"></el-input>
|
|
|
+ <el-input v-model="medcineData.value[m.prop]" :placeholder="m.name"></el-input>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
@@ -112,9 +110,13 @@ export default {
|
|
|
props: ['id'],
|
|
|
data() {
|
|
|
return {
|
|
|
-
|
|
|
+ // 物料详情id
|
|
|
+ materialId: '',
|
|
|
+ // 详情固定标签页
|
|
|
detailsTabs,
|
|
|
-
|
|
|
+ // 标签页当前激活状态
|
|
|
+ activeMainTab: 'material',
|
|
|
+ activeViceTab: 'material_medcine',
|
|
|
// 基本信息下的页签
|
|
|
basicMessage: [
|
|
|
{
|
|
@@ -135,7 +137,7 @@ export default {
|
|
|
],
|
|
|
|
|
|
// 主信息
|
|
|
- fromData: {
|
|
|
+ basicData: {
|
|
|
value: {},
|
|
|
form: []
|
|
|
},
|
|
@@ -162,6 +164,66 @@ export default {
|
|
|
this.$emit("actionBar", JSON.stringify(bar))
|
|
|
|
|
|
},
|
|
|
+ // 切换主信息标签
|
|
|
+ handleMainTabClick(e) {
|
|
|
+ console.log(detailsTabs[e.index], '切换标签');
|
|
|
+ this.activeMainTab = e.code;
|
|
|
+
|
|
|
+ switch (this.activeMainTab) {
|
|
|
+
|
|
|
+ // 基本信息
|
|
|
+ case 'material':
|
|
|
+ this.getMaterialDetails(this.materialId, 'material');
|
|
|
+ break;
|
|
|
+ // 财物信息
|
|
|
+ case 'material_finance':
|
|
|
+ break;
|
|
|
+ // 利润中心信息
|
|
|
+ case 'profit_center':
|
|
|
+ break;
|
|
|
+ // 采购信息
|
|
|
+ case 'material_purchase':
|
|
|
+ break;
|
|
|
+ // 库存信息
|
|
|
+ case 'material_inventory':
|
|
|
+ break;
|
|
|
+ // 计划信息
|
|
|
+ case 'material_plan':
|
|
|
+ break;
|
|
|
+ // 成本信息
|
|
|
+ case 'material_cost':
|
|
|
+ break;
|
|
|
+
|
|
|
+
|
|
|
+ default:
|
|
|
+ this.getMaterialDetails(this.materialId, 'material');
|
|
|
+ this.getMedcineDetails(this.materialId, 'material_medcine');
|
|
|
+ break;
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ // 切换副表信息
|
|
|
+ handleViceTabClick(e) {
|
|
|
+ console.log(basicMessage[e.index], '切换标签');
|
|
|
+ this.activeViceTab = e.code;
|
|
|
+
|
|
|
+ switch (this.activeViceTab) {
|
|
|
+
|
|
|
+ // 医药行业
|
|
|
+ case 'material_medcine':
|
|
|
+ this.getMedcineDetails(this.materialId, 'material_medcine');
|
|
|
+ break;
|
|
|
+ // 辅计量管理
|
|
|
+ case 'material_unit':
|
|
|
+ break;
|
|
|
+ // 辅助属性
|
|
|
+ case 'material_property':
|
|
|
+ break;
|
|
|
+
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ },
|
|
|
// 获取物料基本信息详细信息
|
|
|
getMaterialDetails(id, templateCode) {
|
|
|
|
|
@@ -174,8 +236,8 @@ export default {
|
|
|
console.log(res, '物料基本信息');
|
|
|
let { code, data } = res;
|
|
|
if (code == 200) {
|
|
|
- this.fromData.value = data.data;
|
|
|
- this.fromData.form = data.form;
|
|
|
+ this.basicData.value = data.data;
|
|
|
+ this.basicData.form = data.form;
|
|
|
}
|
|
|
})
|
|
|
},
|
|
@@ -191,15 +253,16 @@ export default {
|
|
|
console.log(res, '医药行业');
|
|
|
let { code, data } = res;
|
|
|
if (code == 200) {
|
|
|
- this.medcineData.value = data.data;
|
|
|
+ this.medcineData.value = data.data || {};
|
|
|
this.medcineData.form = data.form;
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
},
|
|
|
created() {
|
|
|
- this.getMaterialDetails(this.$props.id, 'material');
|
|
|
- this.getMedcineDetails(this.$props.id, 'material_medcine');
|
|
|
+ this.materialId = this.$props.id;
|
|
|
+ this.getMaterialDetails(this.materialId, 'material');
|
|
|
+ this.getMedcineDetails(this.materialId, 'material_medcine');
|
|
|
},
|
|
|
|
|
|
}
|
|
@@ -217,19 +280,55 @@ export default {
|
|
|
overflow: auto;
|
|
|
|
|
|
.md-main {
|
|
|
- max-height: 290px;
|
|
|
+ max-height: calc(100vh - 580px);
|
|
|
+ // max-height: 290px;
|
|
|
margin-bottom: 10px;
|
|
|
overflow-y: auto;
|
|
|
overflow-x: hidden;
|
|
|
}
|
|
|
+
|
|
|
+ .md-vice-content {
|
|
|
+ height: 140px;
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
-<style>
|
|
|
->>>.el-form-item__label {
|
|
|
- font-size: 12px;
|
|
|
+<style scoped>
|
|
|
+.md-content>>>.el-form-item {
|
|
|
+ margin-bottom: 10px !important;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.md-basic>>>.el-form-item {
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.md-basic>>>.el-form-item__label {
|
|
|
+ width: 40%;
|
|
|
+}
|
|
|
+
|
|
|
+.md-basic>>>.el-form-item__content {
|
|
|
+ width: 60%;
|
|
|
+}
|
|
|
+
|
|
|
+.md-content>>>.el-form-item__label {
|
|
|
font-weight: normal;
|
|
|
+ /* text-align: left;
|
|
|
+ width: 28%; */
|
|
|
+ white-space: nowrap;
|
|
|
+ /* IE6 需要定义宽度 */
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ -o-text-overflow: ellipsis;
|
|
|
+ /* Opera */
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ /* IE, Safari (WebKit) */
|
|
|
+ /* -moz-binding: url('ellipsis.xml#ellipsis'); */
|
|
|
+ /* Firefox */
|
|
|
}
|
|
|
</style>
|