搬迁cnas6.6

licp

2024-12-27 6d0552908bc5c17ab9af74120819ec6d3e5df674

搬迁cnas6.6

 src/assets/api/controller.js

@@ -73,6 +73,8 @@
    personPostAuthorizationRecord,
    deviceCheck,
    personCommunicationAbility,
    procurementSuppliesContents,
    procurementSuppliesStore,
  }
}

@@ -977,3 +979,24 @@
const personCommunicationAbility = {
  exportPersonCommunicationAbility:'/personCommunicationAbility/exportPersonCommunicationAbility',//导出
}

const procurementSuppliesContents = {
  directoryListing: "/procurementSuppliesContents/directoryListing", // é‡‡è´­ç‰©èµ„目录列表
  selectById: "/procurementSuppliesContents/selectProcurementSuppliesContentById", // é‡‡è´­ç‰©èµ„目录详情
  add: "/procurementSuppliesContents/addProcurementSuppliesContents", // é‡‡è´­ç‰©èµ„目录新增
  update: "/procurementSuppliesContents/updateProcurementSuppliesContents", // é‡‡è´­ç‰©èµ„目录修改
  deleteById: "/procurementSuppliesContents/deleteProcurementSuppliesContentById", // é‡‡è´­ç‰©èµ„目录删除
  getUserList: "/procurementSuppliesContents/getUserList", // é‡‡è´­ç‰©èµ„目录获取用户列表
  getNodeNames: "/procurementSuppliesContents/getNodeNames", // é‡‡è´­ç‰©èµ„目录获取节点名称
  selectSuppliersDirectoryContentsById:'/suppliersDirectoryContents/selectSuppliersDirectoryContentsById',//供应商目录详情
}

const procurementSuppliesStore = {
  storeList: '/procurementSuppliesStore/storeList', // è€—材入库列表
  addStore: '/procurementSuppliesStore/addStore', // è€—材入库新增
  deleteStore: '/procurementSuppliesStore/deleteStore', // è€—材入库删除
  updateStore: '/procurementSuppliesStore/updateStore', // è€—材入库修改
  selectStoreById: '/procurementSuppliesStore/selectStoreById', // æ ¹æ®id查询耗材入库
  exportExcel: '/procurementSuppliesStore/exportExcel', // è€—材入库导出
  updateStore: '/procurementSuppliesStore/updateStore', // è€—材入库修改
}

 src/components/caorui/6-6/ConsumableOverview/components/CardPanel.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,74 @@
<template>
    <div class="card-container" @click="handleCard">
        <div class="card-panel" :class="[isActive == index ? 'isActive' : '']">
            <el-image
                style="width: 80%; height: 140px"
                :src="javaApi + '/img/' + data.logo"
                fit="fill"
            />
        </div>
        <div class="title">
            {{ data.supplierRef }}
        </div>
    </div>
</template>
<script>

export default {
    props: {
        data: {
            type: Object,
            default: () => {}
        },
        index: {
            type: Number,
            default: -1
        },
        isActive: {
            type: Number,
            default: -1
        }
    },
    data(){
        return {

        }
    },
    mounted() {
      // console.log(1111,this.data)
    },
    methods: {
        handleCard() {
            this.$emit('handleCard', this.data, this.index)
        }
    }
}
</script>
<style scoped>
.card-container  {
    margin: 10px 10px 10px 0;
    text-align: center;
}
.card-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    height: 180px;
    box-shadow: 0px 0px 20px 0px #0000001A;
    cursor: pointer;
    border-radius: 5px;
    border: 1px solid transparent;
}
.card-panel:hover {
    border: 1px solid #409EFF;
    background: #1D56C50D;
}
.isActive {
    border: 1px solid #409EFF;
    background: #1D56C50D;
}
.title {
    margin-top: 15px;
}
</style>

 src/components/caorui/6-6/ConsumableOverview/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,136 @@
<template>
    <div>
        <el-row class="card-box">
            <el-col :span="4" v-for="(item, index) in cardList" :key="index">
                <CardPanel
                    :isActive="isActive"
                    :data="item"
                    :index="index"
                    @handleCard="handleCard"
                />
            </el-col>
        </el-row>
        <TableCard title="供应商信息" :showForm="false" style="margin-top: 5px">
            <template v-slot:table>
                <ZTTable
                    style="margin-top: 18px; padding: 0 15px;"
                    :height="'40vh'"
                    :column="columns"
                    :table-data="tableData"
                >
                    <div slot="action" slot-scope="scope">
                        <el-button type="text" @click="showDialog(scope)">查看</el-button>
                    </div>
                </ZTTable>
            </template>
        </TableCard>
        <Edit ref="editRef" @submit="getTableData" type="详情" />
    </div>
</template>
<script>
import CardPanel from './components/CardPanel.vue';
import TableCard from '@/components/caorui/TableCard/index.vue';
import ZTTable from '@/components/caorui/ZTTable/index.vue';
import Edit from "../components/Edit.vue"
import { selectSupplierManagementPage } from "@/assets/api/api";
import axios from 'axios';

export default {
    components: {CardPanel, TableCard, ZTTable, Edit},
    props: {
        contentsId: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            columns: [
                {
                    label: "供应商编号",
                    prop: "supplierRef"
                },
                {
                    label: "供应商名称",
                    prop: "supplierRef"
                },
                {
                    label: "地址",
                    prop: "supplierName"
                },
                {
                    label: "联系人",
                    prop: "contacts"
                },
                {
                    label: "联系电话",
                    prop: "phone"
                },
                {
                    label: "传真",
                    prop: "fax"
                },
                {
                    label: "网址",
                    prop: "website"
                },
                {
                    label: "邮箱",
                    prop: "email"
                },
                {
                    label: "上次更新时间",
                    prop: "updateTime"
                },
                {
                    fixed: "right",
                    dataType: "slot",
                    slot: "action",
                    label: "操作"
                }
            ],
            cardList: [],
            tableData: [],
            isActive: -1
        }
    },
    watch: {
        contentsId(newVal) {
            if (newVal !== 0) {
                this.getTableData();
            }
        },
    },
    mounted() {
        this.getTableData(this.contentsId)
    },
    methods: {
         // èŽ·å–表格数据
         async getTableData() {
            const {code, data } = await axios({
                method: 'get',
                url: `${selectSupplierManagementPage}/${this.contentsId}`,
            })
            if(code == 200) {
                this.cardList = data;
            }
        },
        handleCard(data, index) {
            this.isActive = index
            this.tableData = [data]
        },
        showDialog(row) {
            this.$refs.editRef.openDialog(row)
        }
    }
}
</script>
<style scoped>
.card-box {
    width: 100%;
    padding-left: 5px;
    padding-right: 5px;
    height: 30vh;
    overflow-y: auto;
}
</style>

 src/components/caorui/6-6/QualifiedSuppliers/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,220 @@
<template>
    <div>
        <TableCard :showTitle="false">
            <template slot="form">
                <div class="action-box">
                    <div></div>
                    <div class="flex">
                        <el-button :disabled="contentsId == 0" icon="el-icon-plus" type="primary" @click="showDialog()">
                            æ–°å»º
                        </el-button>
                        <el-button icon="el-icon-upload2" @click="exportExcel">
                            å¯¼å‡ºExcel
                        </el-button>
                    </div>
                </div>
            </template>
            <template v-slot:table>
                <ZTTable
                    :column="columns"
                    :height="'70vh'"
                    :isSelection="true"
                    :table-data="tableData"
                    style="margin-top: 18px; padding: 0 15px;"
                >
                    <div slot="action" slot-scope="scope">
                        <el-button type="text" @click="showDialog(scope)">编辑</el-button>
                        <el-button type="text" @click="delRow(scope)">
                            <span style="color: #F56C6C">删除</span>
                        </el-button>
                    </div>
                </ZTTable>
                <div class="pagination">
                    <div></div>
                    <el-pagination
                        :page-size="pagination.pageSize"
                        :page-sizes="[10, 20, 30, 40]"
                        :total="pagination.total"
                        layout="total, sizes, prev, pager, next, jumper"
                        @current-change="handleCurrent"
                        @size-change="handleSize"
                    >
                    </el-pagination>
                </div>
            </template>
        </TableCard>
        <Edit ref="editRef" :contentsId="contentsId" @submit="getTableData" type="编辑" />
    </div>
</template>

<script>
import TableCard from '@/components/caorui/TableCard/index.vue';
import ZTTable from '@/components/caorui/ZTTable/index.vue';
import Edit from "../components/Edit.vue"
import { selectQualifiedSupplierManagementPage, delSupplierManagement, exportSupplierManagement } from "@/assets/api/api";
import axios from "axios";

export default {
    components: {
        TableCard, ZTTable, Edit
    },
    props: {
        contentsId: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            columns: [
                {
                    label: "供应商编号",
                    prop: "supplierRef"
                },
                {
                    label: "供应商",
                    prop: "supplierName"
                },
                {
                    label: "供应物品(服务)名称",
                    prop: "supplierItemServiceName"
                },
                {
                    label: "地址",
                    prop: "adress"
                },
                {
                    label: "联系电话",
                    prop: "phone"
                },
                {
                    fixed: "right",
                    dataType: "slot",
                    slot: "action",
                    label: "操作"
                }
            ],
            tableData: [],
            pagination: {
                current: 1,
                pageSize: 20,
                total: 0
            },
        }
    },
    mounted() {
        this.getTableData()
    },
    watch: {
        contentsId(newVal) {
            if (newVal !== 0) {
                this.getTableData();
            }
        },
    },
    methods: {
        // èŽ·å–表格数据
        async getTableData() {
            const {code, data } = await axios({
                method: 'get',
                url: selectQualifiedSupplierManagementPage,
                params: {
                  ...this.pagination,
                  parentId: this.contentsId
                }
            })
            if(code == 200) {
                this.tableData = data.records;
            }
        },
        showDialog(scope) {
            this.$refs.editRef.openDialog(scope)
        },
        handleCurrent(val) {
            this.pagination.current = val;
            this.getTableData()
        },
        handleSize(size) {
            this.pagination.pageSize = size;
            this.getTableData()
        },
        // åˆ é™¤æ•°æ®
        delRow(scope) {
            this.$confirm('此操作将永久删除该文件, æ˜¯å¦ç»§ç»­?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then( async () => {
                const { code } = await axios({
                    method: 'post',
                    url: `${delSupplierManagement}/${scope.row.supplierManagementId}`,
                })
                if(code == 200) {
                    this.$message.success('删除成功')
                    this.getTableData()
                } else {
                    this.$message.error('删除失败')
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            })
        },
        async exportExcel() {
            const res = await axios({
                method: "post",
                url: `${exportSupplierManagement}/${this.contentsId}`,
                responseType: "blob"
            })
            const blob = new Blob([res], {type: 'application/octet-stream'});
          //将Blob å¯¹è±¡è½¬æ¢æˆå­—符串
          let reader = new FileReader();
          reader.readAsText(blob, 'utf-8');
          reader.onload = () => {
            try {
              let result = JSON.parse(reader.result);
              if (result.message) {
                this.$message.error(result.message);
              } else {
                const url = URL.createObjectURL(blob);
                const link = document.createElement('a');
                link.href = url;
                link.download = '合格供应商.xlsx';
                link.click();
                this.$message.success('导出成功')
              }
            } catch (err) {
              console.log(err);
              const url = URL.createObjectURL(blob);
              const link = document.createElement('a');
              link.href = url;
              link.download = '合格供应商.xlsx';
              link.click();
              this.$message.success('导出成功')
            }
          }
        }
    }
}
</script>

<style scoped>
.flex {
    display: flex;
}
.action-box {
    width: 100%;
    padding-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.pagination {
    padding-top: 15px;
    padding-right: 10px;
    display: flex;
    justify-content: space-between
}
</style>

 src/components/caorui/6-6/components/Edit.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,237 @@
<template>
    <el-dialog
        title="供应商详情"
        width="40%"
        :visible.sync="dialogVisible"
    >
        <el-form :model="model" label-width="auto">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="供应商">
                        <el-input v-model="model.supplierName" placeholder="请输入" :disabled="type=='详情'" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="编号">
                        <el-input v-model="model.supplierRef" placeholder="请输入" :disabled="type=='详情'" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="供应商物品服务名称">
                        <el-input v-model="model.supplierItemServiceName" :disabled="type=='详情'" placeholder="请输入" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="邮编">
                        <el-input v-model="model.postalCode" :disabled="type=='详情'" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="地址">
                        <el-input v-model="model.adress" :disabled="type=='详情'" placeholder="请输入" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="logo">
                        <div class="rows">
                            <el-input placeholder="请输入" :disabled="type=='详情'" v-model="model.logo" style="width: 100%;" />
                            <el-upload
                                ref="upload"
                                style="float: left; margin: 0 12px 0 20px;"
                                :action="action"
                                :show-file-list="false"
                                :on-success="onSuccess"
                            >
                                <el-button class="uploadFile" slot="trigger" type="primary" :disabled="type=='详情'">浏览</el-button>
                            </el-upload>
                        </div>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="联系人">
                        <el-input v-model="model.contacts" placeholder="请输入" :disabled="type=='详情'" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系电话">
                        <el-input v-model="model.phone" placeholder="请输入" :disabled="type=='详情'" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="户名">
                        <el-input v-model="model.householdName" placeholder="请输入" :disabled="type=='详情'" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="传真">
                        <el-input v-model="model.fax" placeholder="请输入" :disabled="type=='详情'" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="开户行">
                        <el-input v-model="model.openingName" placeholder="请输入" :disabled="type=='详情'" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="网址">
                        <el-input v-model="model.website" placeholder="请输入" :disabled="type=='详情'" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="账号">
                        <el-input v-model="model.accountName" placeholder="请输入" :disabled="type=='详情'" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="Email">
                        <el-input v-model="model.email" placeholder="请输入" :disabled="type=='详情'" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <span slot="footer" v-if="type!='详情'">
            <el-button @click="dialogVisible = false">取 æ¶ˆ</el-button>
            <el-button type="primary" @click="submit">保 å­˜</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { addSupplierManagement, updateSupplierManagement } from "@/assets/api/api";
import axios from 'axios';
export default {
    props: {
        contentsId: {
            type: Number,
            default: 0
        },
        type:{
            type: String,
            default: '编辑'
        }
    },
    data() {
        return {
            dialogVisible: false,
            model: {
                parentId: this.contentsId,
                supplierManagementId: undefined,
                supplierName: undefined,    // ä¾›åº”商
                supplierRef: undefined, // ç¼–号
                supplierItemServiceName: undefined, // ä¾›åº”商物品服务名称
                postalCode: undefined, // é‚®ç¼–
                adress: undefined, // åœ°å€
                logo: undefined, // logo
                contacts: undefined, // è”系人
                phone: undefined, // è”系电话
                householdName: undefined, // æˆ·å
                fax: undefined, // ä¼ çœŸ
                openingName: undefined, // å¼€æˆ·è¡Œ
                website: undefined, // ç½‘址
                accountName: undefined, // è´¦å·
                email: undefined    // Email
            }
        }
    },
    computed: {
        action() {
            return `${this.javaApi}/${this.$api.personnel.saveCNASFile}`
        }
    },
    methods: {
        openDialog(form) {
            if(form) {
                console.log(form.row)
                this.model.supplierManagementId = form.row.supplierManagementId
                this.model.supplierName = form.row.supplierName
                this.model.supplierRef = form.row.supplierRef
                this.model.supplierItemServiceName = form.row.supplierItemServiceName
                this.model.postalCode = form.row.postalCode
                this.model.adress = form.row.adress
                this.model.logo = form.row.logo
                this.model.contacts = form.row.contacts
                this.model.phone = form.row.phone
                this.model.householdName = form.row.householdName
                this.model.fax = form.row.fax
                this.model.openingName = form.row.openingName
                this.model.website = form.row.website
                this.model.accountName = form.row.accountName
                this.model.email = form.row.email
            }else{
              this.model = {
                parentId: this.contentsId,
                supplierManagementId: undefined,
                supplierName: undefined,    // ä¾›åº”商
                supplierRef: undefined, // ç¼–号
                supplierItemServiceName: undefined, // ä¾›åº”商物品服务名称
                postalCode: undefined, // é‚®ç¼–
                adress: undefined, // åœ°å€
                logo: undefined, // logo
                contacts: undefined, // è”系人
                phone: undefined, // è”系电话
                householdName: undefined, // æˆ·å
                fax: undefined, // ä¼ çœŸ
                openingName: undefined, // å¼€æˆ·è¡Œ
                website: undefined, // ç½‘址
                accountName: undefined, // è´¦å·
                email: undefined    // Email
              }
            }
            this.model.parentId = this.contentsId
            this.dialogVisible = true
        },
        async submit() {
            if(this.model.supplierManagementId) {
                const { code } = await axios({
                    url: updateSupplierManagement,
                    method: 'post',
                    data: this.model,
                    noQs: true
                })
                if(code == 200) {
                    this.$message.success('修改成功')
                    this.$emit('submit')
                    this.dialogVisible = false
                }
            } else {
                const { code } = await axios({
                    url: addSupplierManagement,
                    method: 'post',
                    data: this.model,
                    noQs: true
                })
                if(code == 200) {
                    this.$message.success('新增成功')
                    this.$emit('submit')
                    this.dialogVisible = false
                }
            }
        },
        async onSuccess(response) {
            this.$set(this.model, "logo", response.data)
        }
    }
}
</script>

<style scoped>
.rows {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
</style>

 src/components/do/a6.service-and-supply-purchase/ConsumableList.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,287 @@
<template>
  <div>
    <TableCard :showTitle="false">
      <template slot="form">
        <div class="action-box">
          <div></div>
          <div class="flex">
            <el-button icon="el-icon-plus" size="small" type="primary" @click="showDialog(undefined)">
              æ–°å»º
            </el-button>
            <el-button icon="el-icon-upload2" size="small" @click="exportExcel">
              å¯¼å‡ºExcel
            </el-button>
          </div>
        </div>
      </template>
      <template v-slot:table>
        <ZTTable
          :column="columns"
          :currentChange="rowClick"
          :height="'25vh'"
          :highlightCurrentRow="true"
          :isSelection="false"
          :rowStyle="tableRowStyle"
          :table-data="tableData"
          rowKey="id"
          style="margin-top: 18px; padding: 0 15px;"
        >
          <template v-slot:consumablesTypeSlot="{row}">
            {{ findType(row.consumablesType) }}
          </template>
          <template v-slot:operation="scope">
            <el-button size="small" type="text" @click="showDialog(scope.row)">编辑</el-button>
            <el-button size="small" style="color: #f56c6c" type="text" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </ZTTable>
        <div class="pagination">
          <div></div>
          <el-pagination
            :page-size="pagination.pageSize"
            :page-sizes="[10, 20, 30, 40]"
            :total="pagination.total"
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="handleCurrent"
            @size-change="handleSize"
          >
          </el-pagination>
        </div>
      </template>
    </TableCard>
    <el-divider></el-divider>
    <div>
      <ConsumableProject ref="consumableProject" @submit="fetchData"></ConsumableProject>
    </div>
    <Edit ref="editRef" :contentsId="contentsId" @submit="fetchData"/>
  </div>
</template>

<script>
import TableCard from '@/components/caorui/TableCard/index.vue';
import ZTTable from '@/components/caorui/ZTTable/index.vue';
import Edit from "./components/Edit.vue"
import axios from "axios";
import {
  addProcurementSuppliesList,
  deleteProcurementSuppliesList,
  procurementSuppliesList,
  procurementSuppliesListExport
} from "@/assets/api/api";
import ConsumableProject from "@/components/do/a6.service-and-supply-purchase/ConsumableProject.vue"

export default {
  components: {
    TableCard, ZTTable, Edit, ConsumableProject
  },
  props: {
    contentsId: {
      type: Number,
      required: true,
    }
  },
  watch: {
    contentsId(newVal, oldVal) {
      if (newVal !== 0) {
        this.fetchData()
      }
    }
  },
  data() {
    return {
      columns: [
        {
          label: "货号",
          prop: "itemNumber"
        },
        {
          label: "类别",
          prop: "consumablesType",
          dataType: "slot",
          slot: "consumablesTypeSlot"
        },
        {
          label: "名称",
          prop: "consumablesName"
        },
        {
          label: "规格",
          prop: "specifications"
        },
        {
          label: "参考供应商",
          prop: "supplierName"
        },
        {
          label: "库存下限",
          prop: "lowerLimit"
        },
        {
          label: "当前库存",
          prop: "currentAmount"
        },
        {
          label: "计量单位",
          prop: "unit"
        },
        {
          label: "备注",
          prop: "remark"
        },
        {
          label: "负责人",
          prop: "personInChargeName"
        },
        {
          label: "最近更新人",
          prop: "updateUserName"
        },
        {
          label: "最近更新日期",
          prop: "updateTime"
        },
        {
          fixed: 'right',
          label: "操作",
          width: 120,
          dataType: "slot",
          slot: "operation"
        }
      ],
      tableData: [],
      pagination: {
        current: 1,
        pageSize: 20,
        total: 0
      },
      options: [],
    }
  },
  mounted() {
    this.fetchData()
    this.selectEnumByCategory()
  },
  methods: {
    async fetchData() {
      const res = await axios({
        method: 'get',
        url: `${procurementSuppliesList}`,
        params: {
          // page: this.pagination.current,
          // pageSize: this.pagination.pageSize,
          contentsId: this.contentsId
        }
      })
      if (res.code === 200) {
        this.tableData = res.data.records
        if (this.tableData.length > 0) {
          this.rowClick(this.tableData[0])
        }
      }
    },
    // èŽ·å–å­—å…¸
    async selectEnumByCategory() {
      await this.$axios.post(this.$api.enums.selectEnumByCategory, {
        category: "耗材类型"
      }).then(res => {
        this.options = res.data
      })
    },
    findType(val) {
      this.$nextTick()
      let res
      const e = this.options.find(item => item.value == val)
      if(e) {
        res = e.label
      } else {
        res = '-'
      }
      return res
    },
    showDialog(row) {
      this.$refs.editRef.openDialog(row);
    },
    async exportExcel() {
      const res = await axios({
        method: "post",
        url: `${procurementSuppliesListExport}/${this.contentsId}`,
        responseType: "blob"
      })
      const blob = new Blob([res], {type: 'application/octet-stream'});
      //将Blob å¯¹è±¡è½¬æ¢æˆå­—符串
      let reader = new FileReader();
      reader.readAsText(blob, 'utf-8');
      reader.onload = () => {
        try {
          let result = JSON.parse(reader.result);
          if (result.message) {
            this.$message.error(result.message);
          } else {
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = '耗材列表.xlsx';
            link.click();
            this.$message.success('导出成功')
          }
        } catch (err) {
          console.log(err);
          const url = URL.createObjectURL(blob);
          const link = document.createElement('a');
          link.href = url;
          link.download = '耗材列表.xlsx';
          link.click();
          this.$message.success('导出成功')
        }
      }
    },
    handleCurrent() {
    },
    handleSize() {
    },
    handleDelete(row) {
      this.$axios.post(deleteProcurementSuppliesList, row, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(res => {
        if (res.code === 200) {
          this.$message.success('删除成功')
          this.fetchData()
        }
      })
    },
    rowClick(row) {
      this.$refs.consumableProject.fetchListId(row)
    },
    tableRowStyle({row}) {
      if(row.currentAmount <= row.lowerLimit) {
        return { background: '#ffcaca' }
      } else {
        return {}
      }
    }
  }
}
</script>


<style scoped>
.flex {
  display: flex;
}

.action-box {
  width: 100%;
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pagination {
  padding-top: 15px;
  padding-right: 10px;
  display: flex;
  justify-content: space-between
}
</style>

 src/components/do/a6.service-and-supply-purchase/ConsumableOverview.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,126 @@
<template>
    <div>
        <el-row class="card-box">
            <el-col :span="4" v-for="(item, index) in cardList" :key="index">
                <CardPanel
                    :isActive="isActive"
                    :data="item"
                    :index="index"
                    @handleCard="handleCard"
                />
            </el-col>
            <el-col :span="24" v-if="cardList.length==0" style="color: #909399;font-size: 14px;text-align: center;margin-top: 20px;">暂无数据</el-col>
        </el-row>
        <TableCard title="耗材信息" :showForm="false" style="margin-top: 5px">
            <template v-slot:table>
                <ZTTable
                    style="margin-top: 18px; padding: 0 15px;"
                    :height="'20vh'"
                    :column="columns"
                    :table-data="tableData"
                >
                </ZTTable>
            </template>
        </TableCard>
    </div>
</template>
<script>
import CardPanel from '@/components/caorui/6-6/ConsumableOverview/components/CardPanel';
import TableCard from '@/components/caorui/TableCard/index.vue';
import ZTTable from '@/components/caorui/ZTTable/index.vue';
import { procurementSuppliesList } from "@/assets/api/api";
import axios from "axios";

export default {
    components: { CardPanel, TableCard, ZTTable },
    props: {
        contentsId: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            isActive: -1,
            columns: [
                {
                    label: "耗材编号",
                    prop: "itemNumber"
                },
                {
                    label: "耗材名称",
                    prop: "consumablesName"
                },
                {
                    label: "耗材类型",
                    prop: "consumablesType"
                },
                {
                    label: "规格",
                      prop: "specifications"
                },
                {
                    label: "单位",
                    prop: "unit"
                },
                {
                    label: "单价",
                    prop: "referencePrice"
                },
                {
                    label: "当前库存",
                    prop: "currentAmount"
                },
                {
                    label: "负责人",
                    prop: "personInChargeName"
                },
                {
                    label: "上次更新时间",
                    prop: "updateTime"
                }
            ],
            cardList: [],
            tableData: []
        }
    },
    watch: {
        contentsId(newVal, oldVal) {
            this.getTableData(newVal)
        }
    },
    mounted() {
        this.getTableData(this.contentsId)
    },
    methods: {
        handleCard(data, index) {
            this.isActive = index
            this.tableData = [data]
        },
        async getTableData(id) {
            const { code, data } = await axios({
                method: 'get',
                url: `${procurementSuppliesList}`,
                params: {
                    contentsId: id
                }
            })
            if(code == 200) {
                this.cardList = data.records.map(m=>{
                  m.logo = m.consumablesIcon
                  return m
                })
            }
        }
    }
}
</script>
<style scoped>
.card-box {
    width: 100%;
    padding-left: 5px;
    padding-right: 5px;
    height: 30vh;
    overflow-y: auto;
}
</style>

 src/components/do/a6.service-and-supply-purchase/ConsumableProject.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,175 @@
<template>
  <div>
    <TableCard :showTitle="false">
      <template slot="form">
        <div class="action-box">
          <div></div>
          <div class="flex">
            <el-button icon="el-icon-plus" size="small" type="primary" @click="showDialog">
              æ·»åŠ é¡¹ç›®
            </el-button>
            <!-- <el-button icon="el-icon-upload2" size="small" @click="exportExcel">
              å¯¼å‡º
            </el-button> -->
          </div>
        </div>
      </template>
      <template v-slot:table>
        <ZTTable
          :column="columns"
          :height="'25vh'"
          :isSelection="true"
          :table-data="tableData"
          style="margin-top: 18px; padding: 0 15px;"
        >
          <template v-slot:operation="scope">
            <el-button size="small" type="text" @click="deleteData(scope.row)">删除</el-button>
          </template>
        </ZTTable>
        <div class="pagination">
          <div></div>
          <el-pagination
            :page-size="pagination.pageSize"
            :page-sizes="[10, 20, 30, 40]"
            :total="pagination.total"
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="handleCurrent"
            @size-change="handleSize"
          >
          </el-pagination>
        </div>
      </template>
    </TableCard>
    <AddProject ref="AddProjectRef" @submit="fetchData,$emit('submit')"/>
  </div>
</template>

<script>
import TableCard from '@/components/caorui/TableCard/index.vue';
import ZTTable from '@/components/caorui/ZTTable/index.vue';
import Edit from "./components/Edit.vue"
import AddProject from './components/AddProject.vue';
import {
  deleteProcurementSuppliesExpends,
  procurementSuppliesExpendsList,
  procurementSuppliesList
} from "../../../assets/api/api";
import axios from "axios";

export default {
  components: {
    TableCard, ZTTable, Edit, AddProject
  },
  data() {
    return {
      columns: [
        // {
        //   label: "编号"
        // },
        {
          label: "项目名称",
          prop: "listName"
        },
        {
          label: "消耗数量",
          prop: "amount"
        },
        {
          label: "录入人",
          prop: "enterUserName"
        },
        {
          label: "最近更新人",
          prop: "updateUserName"
        },
        {
          label: "最近更新日期",
          prop: "updateTime"
        },
        {
          label: "操作",
          dataType: "slot",
          slot: "operation"
        }
      ],
      tableData: [],
      pagination: {
        current: 1,
        pageSize: 20,
        total: 0
      },
      listId: 0,
      row: undefined
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchListId(row) {
      if(row) {
        this.listId = row.id
        this.row = row
      }
      this.fetchData()
    },
    async fetchData() {
      if (this.listId === 0) return
      const res = await axios({
        method: 'get',
        url: `${procurementSuppliesExpendsList}/${this.listId}`,
        params: {
          // page: this.pagination.current,
          // pageSize: this.pagination.pageSize,
        }
      })
      if (res.code === 200) {
        this.tableData = res.data
      }
    },
    showDialog() {
      this.$refs.AddProjectRef.openDialog(this.row);
    },
    deleteData(row) {
      this.$axios.post(deleteProcurementSuppliesExpends, row, {
              headers: {
                'Content-Type': 'application/json'
              }
            }).then(res => {
        if (res.code === 200) {
          this.$message.success('删除成功')
          this.$emit('submit')
          this.fetchData()
        }
      })
    },
    handleCurrent() {
    },
    handleSize() {
    },
    exportExcel() {
    }
  }
}
</script>

<style scoped>
.flex {
  display: flex;
}

.action-box {
  width: 100%;
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pagination {
  padding-top: 15px;
  padding-right: 10px;
  display: flex;
  justify-content: space-between
}
</style>

 src/components/do/a6.service-and-supply-purchase/Store.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,516 @@
<template>
  <div>
    <div style="
        display: flex;
        justify-content: flex-end;
        margin-right: 20px;
        margin-bottom: 20px;
      ">
      <el-button icon="el-icon-plus" size="small" type="primary" @click="addOrUpdateStore('add')">添加
      </el-button>
      <el-button icon="el-icon-download" size="small" @click="importExcel">
        å¯¼å‡ºexcel
      </el-button>
    </div>
    <div class="table">
      <ZTTable
        :column="tableColumn"
        :height="'calc(100vh - 20em)'"
        :table-data="storageTableData"
        :table-loading="tableLoading"
        style="padding: 0 10px;margin-bottom: 16px">
      </ZTTable>
      <el-pagination
        :current-page="1"
        :page-size="page.size"
        :page-sizes="[10, 20, 30, 50, 100]"
        :total="total" layout="->,total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>

    <!-- ç¼–辑-新增弹框 -->
    <el-dialog :before-close="handleClose" :close-on-click-modal="false"
               :close-on-press-escape="false" :title="title"
               :visible.sync="dialogVisible" width="70%">
      <!-- å…¥åº“单 -->
      <div>
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">入库单</span>
        </div>
        <el-form ref="formModel" :model="form" label-width="auto">
          <el-col :span="12">
            <el-form-item label="入库单号">
              <el-input v-model="form.oddNumbers" placeholder="请输入入库单号" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入库库存">
              <el-input v-model="form.inventory" placeholder="请输入入库库存" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入库总金额">
              <el-input v-model="form.totalAmount" placeholder="请输入入库总金额" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入库日期">
              <el-date-picker v-model="form.storageTime" format="yyyy-MM-dd"
                              placeholder="选择日期"
                              size="small"
                              style="width: 100%" type="date" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          </el-col>
            <el-col :span="12">
              <el-form-item label="入库人">
                <el-select v-model="form.storageUser" size="small" style="width: 100%">
                  <el-option v-for="item in users" :key="item.id" :label="item.nodeName" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          <el-col :span="12">
            <el-form-item label="入库说明">
              <el-input v-model="form.remark" :rows="2" placeholder="请输入内容" type="textarea">
              </el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </div>
      <!-- å…¥åº“明细 -->
      <div>
        <div>入库明细</div>
        <div class="input-form">
          <div>
            <div>
              <span>耗材名称:</span>
              <el-select v-model="formTwo.id" filterable placeholder="请选择耗材名称" size="small" style="width: 70%">
                <el-option v-for="(v, i) in consumableOptions" :key="i" :label="v.consumablesName"
                  :value="v.id"></el-option>
              </el-select>
            </div>
          </div>
          <div>
            <div>
              <span>单价:</span>
              <el-input v-model="formTwo.unitPrice" placeholder="请输入单价" size="small" style="width: 70%">
              </el-input>
            </div>
          </div>
          <div>
            <div>
              <span>入库数量:</span>
              <el-input v-model="formTwo.storeNumber" placeholder="请输入入库数量" size="small" style="width: 70%">
              </el-input>
            </div>
          </div>
          <div>
            <div>
              <span>总价:</span>
              <el-input v-model="formTwo.totalPrice" placeholder="请输入总价" size="small" style="width: 70%">
              </el-input>
            </div>
          </div>
          <el-button size="mini" type="primary"
            @click="addTableData">添加
          </el-button>
        </div>
        <el-table :data="consumables" style="margin-top: 10px">
          <el-table-column label="编号" type="index" width="120px"></el-table-column>
          <el-table-column label="货号" prop="itemNumber"></el-table-column>
          <el-table-column label="类别" prop="type"></el-table-column>
          <el-table-column label="名称" prop="consumablesName"></el-table-column>
          <el-table-column label="规格" prop="specifications"></el-table-column>
          <el-table-column label="参考供应商" prop="supplier"></el-table-column>
          <el-table-column label="计量单位" prop="unit"></el-table-column>
          <el-table-column label="单价" prop="unitPrice"></el-table-column>
          <el-table-column label="入库数量" prop="storeNumber"></el-table-column>
          <el-table-column label="总价" prop="totalPrice"></el-table-column>
          <el-table-column label="操作" width="80px">
            <template slot-scope="scope">
              <el-button size="mini" style="color: #f56c6c" type="text" @click="deleteTableData(scope.$index)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 æ¶ˆ</el-button>
        <el-button type="primary" @click="save">保 å­˜</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { procurementSuppliesList, procurementSuppliesStoreExportExcel } from "../../../assets/api/api";
import axios from "axios";
import ZTTable from '../../caorui/ZTTable/index.vue';

export default {
  computed: {
    title() {
      return this.dialogType == "add" ? "新建入库" : "编辑入库";
    },
  },
  props: {
    contentsId: {
      type: Number,
      default: 0
    }
  },
  watch: {

  },
  data() {
    return {
      mutiList: [],
      consumables: [],
      users: [],
      form: {
        oddNumbers: null,
        inventory: null,
        totalAmount: null,
        storageTime: null,
        storageUser: null,
        remark: null,
      },
      formTwo: {
        consumablesName: null,
        unitPrice: null,
        storeNumber: null,
        totalPrice: null,
      },
      dialogVisible: false,
      dialogType: "",
      upIndex: 0,
      tableColumn: [
        {
          label: '入库单号',
          prop: 'oddNumbers',
          minWidth: '100'
        },
        {
          label: '耗材名称',
          prop: 'consumablesName',
          minWidth: '100'
        },
        {
          label: '入库数量',
          prop: 'storeNumber',
          minWidth: '100'
        },
        {
          label: '入库总价',
          prop: 'totalPrice',
          minWidth: '100'
        },
        {
          label: '入库人',
          prop: 'storageUserName',
          minWidth: '100'
        }, {
          label: '入库日期',
          prop: 'storageTime',
          minWidth: '100'
        }, {
          label: '说明',
          prop: 'remark',
          minWidth: '100'
        }, {
          label: '登记人',
          prop: 'registrantName',
          minWidth: '160'
        },{
          label: '登记日期',
          prop: 'registrantTime',
          minWidth: '100'
        },
        {
          dataType: 'action',
          fixed: 'right',
          minWidth: '120',
          label: '操作',
          operation: [
            {
              name: '编辑',
              type: 'text',
              clickFun: (row) => {
                this.addOrUpdateStore('edit', row);
              },
            },
            {
              name: '删除',
              type: 'text',
              color: '#f56c6c',
              clickFun: (row) => {
                this.deleteStore(row)
              },
            }
          ]
        }
      ],
      tableLoading: false,
      page: {
        size: 20,
        current: 1,
      },
      total: 0,
      consumableOptions: [],
      options: [],
      storageTableData: [],
      searchForm: {
        orderBy: {
          field: "id",
          order: "desc",
        },
      },
    };
  },
  components: {
    ZTTable,
  },
  mounted() {
    this.searchList();
    this.getUserList();
    this.fetchListOptions()
    this.selectEnumByCategory()
  },
  methods: {
    // ä¿å­˜
    save() {
      let data = {
        store: this.form,
        consumables: this.consumables,
      };
      if(this.form.id){
        // ç¼–辑
        this.$axios
        .post(this.$api.procurementSuppliesStore.updateStore, data, {
          headers: {
            "Content-Type": "application/json",
          },
        })
        .then((res) => {
          if (res.code == 200) {
            this.$message.success("保存成功");
            this.handleClose();
            // this.$refs.selectList()
            this.searchList()
          }
        });
      }else{
        // æ–°å¢ž
        this.$axios
        .post(this.$api.procurementSuppliesStore.addStore, data, {
          headers: {
            "Content-Type": "application/json",
          },
        })
        .then((res) => {
          if (res.code == 200) {
            this.$message.success("保存成功");
            this.handleClose();
            // this.$refs.selectList()
            this.searchList()
          }
        });
      }
    },
    // èŽ·å–å­—å…¸
    selectEnumByCategory() {
      this.$axios.post(this.$api.enums.selectEnumByCategory, {
        category: "耗材类型"
      }).then(res => {
        this.options = res.data
      })
    },
    findType(val) {
      console.log(val)
      return this.options.find(item => item.value === val).label
    },
    // æ·»åŠ è¡¨æ ¼æ•°æ®
    addTableData() {
      this.$nextTick()
      this.consumableOptions.forEach(item => {
        if (item.id === this.formTwo.id) {
          this.consumables.push({
            itemNumber: null,
            type: this.findType(item.consumablesType),
            consumablesName: item.consumablesName,
            specifications: item.specifications,
            supplier: item.supplierName,
            unit: item.unit,
            unitPrice: this.formTwo.unitPrice,
            storeNumber: this.formTwo.storeNumber,
            totalPrice: this.formTwo.totalPrice,
          });
        }
      })
    },
    deleteTableData(index) {
      this.consumables.splice(index, 1);
    },
    // æ‰“开弹框
    addOrUpdateStore(type,row) {
      if (type === 'edit') {
        this.dialogType = "update";
        this.$axios.get(this.$api.procurementSuppliesStore.selectStoreById + '?id=' + row.id).then(res => {
          if (res.code === 201) return
          this.consumables = res.data.consumables
          this.form = {...res.data.store}
        }).catch(err => {
          console.log('err---', err);
        })
      } else {
        this.dialogType = "add";
      }
      this.dialogVisible = true;
    },
    // æŸ¥è¯¢åˆ—表
    searchList () {
      const entity = this.searchForm
      const page = this.page
      this.tableLoading = true
      this.$axios.post(this.$api.procurementSuppliesStore.storeList, {entity, page}, {
        headers: {
          "Content-Type": "application/json"
        },
        noQs: true
      }).then(res => {
        this.tableLoading = false
        if (res.code === 201) return
        this.storageTableData = res.data.body.records
        this.total = res.data.body.total
      }).catch(err => {
        console.log('err---', err);
        this.tableLoading = false
      })
    },
    // åˆ†é¡µ
    handleSizeChange(val) {
      this.page.size = val;
      this.searchList();
    },
    handleCurrentChange(val) {
      this.page.current = val;
      this.searchList();
    },
    // å¯¼å‡ºexcel
    async importExcel() {
      const res = await axios({
        method: "post",
        url: `${procurementSuppliesStoreExportExcel}/${this.contentsId}`,
        responseType: "blob"
      })
      const blob = new Blob([res], {type: 'application/octet-stream'});
      //将Blob å¯¹è±¡è½¬æ¢æˆå­—符串
      let reader = new FileReader();
      reader.readAsText(blob, 'utf-8');
      reader.onload = () => {
        try {
          let result = JSON.parse(reader.result);
          if (result.message) {
            this.$message.error(result.message);
          } else {
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = '耗材入库.xlsx';
            link.click();
            this.$message.success('导出成功')
          }
        } catch (err) {
          console.log(err);
          const url = URL.createObjectURL(blob);
          const link = document.createElement('a');
          link.href = url;
          link.download = '耗材入库.xlsx';
          link.click();
          this.$message.success('导出成功')
        }
      }
    },
    handleClose() {
      this.form = {
        oddNumbers: null,
        inventory: null,
        totalAmount: null,
        storageTime: null,
        storageUser: null,
        remark: null,
      };
      this.formTwo = {
        consumablesName: null,
        unitPrice: null,
        storeNumber: null,
        totalPrice: null,
      };
      this.consumables = [];
      this.dialogVisible = false;
    },
    viewIssued(row) {
      console.log(row);
    },
    // èŽ·å–所有用户
    getUserList() {
      this.$axios
        .get(this.$api.procurementSuppliesContents.getUserList)
        .then((res) => {
          this.users = res.data;
        });
    },
    async fetchListOptions() {
      const res = await axios({
        method: 'get',
        url: `${procurementSuppliesList}`,
        params: {
          contentsId: this.contentsId
        }
      })
      if (res.code === 200) {
        this.consumableOptions = res.data.records
      }
    },
    // åˆ é™¤
    deleteStore (row) {
      this.$confirm('此操作将永久删除该数据, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableLoading = true
        this.$axios.get(this.$api.procurementSuppliesStore.deleteStore + '?id=' + row.id + '&consumablesId=' + row.consumablesId).then(res => {
          this.tableLoading = false
          if (res.code === 201) return
          this.$message.success('删除成功')
          this.searchList()
        }).catch(err => {
          this.tableLoading = false
          console.log('err---', err);
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  },
};
</script>

<style scoped>
>>>.el-dialog {
  margin: 6vh auto 50px !important;
}
>>> .el-dialog__body {
  max-height: 42em;
  overflow-y: auto;
}
.input-form {
  display: flex;
  margin: 10px 0;
}
</style>

 src/components/do/a6.service-and-supply-purchase/components/AddProject.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,96 @@
<template>
  <el-dialog
    :title="dialogTitle"
    width="60%"
    :visible.sync="dialogVisible"
  >
    <el-form :model="model" label-width="100px">
      <el-col :span="12">
        <el-form-item label="项目名称">
          <el-select 
            v-model="model.name"
            placeholder="请选择项目名称"
            style="width: 100%"
            :disabled="row ? true:false"
            @change="handleSelect"
          >
            <el-option 
              v-for="(v, i) in consumableOptions" 
              :label="v.consumablesName" 
              :value="v"
              :key="i"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="消耗数量">
          <el-input-number v-model="model.amount" :min="0" :step="1" placeholder="请输入消耗数量"></el-input-number>
        </el-form-item>
      </el-col>
    </el-form>
    <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 æ¶ˆ</el-button>
            <el-button type="primary" @click="sumbit">ç¡® å®š</el-button>
        </span>
  </el-dialog>
</template>

<script>
import {addProcurementSuppliesExpends, procurementSuppliesList} from "../../../../assets/api/api";

export default {
  data() {
    return {
      dialogTitle: "",
      dialogVisible: false,
      model: {
        listId: undefined,
        name: ""
      },
      consumableOptions: [],
      row: undefined
    }
  },
  created() {
    this.fetchConsumableOptions()
  },
  methods: {
    fetchConsumableOptions() {
      this.$axios.get(procurementSuppliesList).then(res => {
        if (res.code === 200) {
          this.consumableOptions = res.data.records
        }
      })
    },
    openDialog(row) {
      if(row) {
        console.log(row, 'true')
        this.dialogTitle = `${row.consumablesName}添加消耗项`
        this.row = row
        this.model.listId = row.id
        this.model.name = row.consumablesName
      } else {
        this.dialogTitle = '添加消耗项'
      }
      this.dialogVisible = true
    },
    handleSelect(item) {
      console.log(item)
      this.model.listId = item.id
      this.model.name = item.consumablesName
    },
    sumbit() {
      this.$axios.post(addProcurementSuppliesExpends, this.model, {
        headers: {
          'Content-Type': 'application/json'
        }}).then(res => {
        if (res.code === 200) {
          this.dialogVisible = false
          this.$emit('submit')
        }
      })
    }
    }
  }
</script>

 src/components/do/a6.service-and-supply-purchase/components/Edit.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,264 @@
<template>
  <el-dialog
    :visible.sync="dialogVisible"
    title="添加耗材项目信息"
    width="70%"
  >
    <el-form ref="modelForm" :model="model" :rules="rules" label-width="100px">
      <el-col :span="12">
        <el-form-item label="耗材类型" prop="consumablesType">
          <el-select v-model="model.consumablesType" placeholder="请选择耗材类型" size="small" style="width: 100%">
            <el-option v-for="(v, i) in options" :key="i" :label="v.label" :value="v.value"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="货号">
          <el-input v-model="model.itemNumber" placeholder="请输入货号" size="small"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="耗材名称">
          <el-input v-model="model.consumablesName" placeholder="请输入耗材名称" size="small"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="规格">
          <el-input v-model="model.specifications" placeholder="请输入规格" size="small"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="计量单位">
          <el-input v-model="model.unit" placeholder="请输入计量单位" size="small"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="参考价格">
          <el-input-number v-model="model.referencePrice" :min="0" :precision="2" :step="0.01" placeholder="请输入参考价格"
                           size="small"></el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="存放位置">
          <el-select v-model="model.contentId" placeholder="请选择存放位置" size="small" style="width: 100%">
            <el-option v-for="(v, i) in procurementSuppliesContentOptions" :key="i" :label="v.nodeName"
                       :value="v.id"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="负责人">
          <el-select v-model="model.personInCharge" placeholder="请选择负责人" size="small" style="width: 100%">
            <el-option v-for="(v, i) in userOptions" :key="i" :label="v.nodeName" :value="v.id"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="库存上限">
          <el-input-number v-model="model.upperLimit" :min="0" :step="1" placeholder="请输入库存上限" size="small"></el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="库存下限">
          <el-input-number v-model="model.lowerLimit" :min="0" :step="1" placeholder="请输入库存下限" size="small"></el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="供应商">
          <el-select v-model="model.supplier" placeholder="请选择供应商" size="small" style="width: 100%">
            <el-option v-for="(v, i) in supplierOptions" :key="i" :label="v.supplierName"
                       :value="v.supplierManagementId"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="耗材图标">
          <div class="rows">
            <el-input v-model="model.consumablesIcon" placeholder="请输入耗材图标" size="small" style="width: 90%;"/>
            <el-upload
              ref="upload"
              :action="action"
              :on-success="onSuccessIcon"
              :show-file-list="false"
              style="float: left; margin: 0 12px 0 20px;"
            >
              <el-button slot="trigger" class="uploadFile" size="small" type="primary">浏览</el-button>
            </el-upload>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="耗材附件">
          <div class="rows">
            <el-input v-model="model.attachment" placeholder="请输入耗材附件" size="small" style="width: 90%;"/>
            <el-upload
              ref="upload"
              :action="action"
              :on-success="onSuccessFile"
              :show-file-list="false"
              style="float: left; margin: 0 12px 0 20px;"
            >
              <el-button slot="trigger" class="uploadFile" size="small" type="primary">浏览</el-button>
            </el-upload>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="备注">
          <el-input
            v-model="model.remark"
            :rows="2"
            placeholder="请输入备注"
            size="small"
            type="textarea"
          >
          </el-input>
        </el-form-item>
      </el-col>
    </el-form>
    <span slot="footer" class="dialog-footer">
            <el-button @click="resetForm">取 æ¶ˆ</el-button>
            <el-button type="primary" @click="submit">保 å­˜</el-button>
        </span>
  </el-dialog>
</template>

<script>
import {addProcurementSuppliesList, selectSupplierManagementPage} from "@/assets/api/api";
import {selectSupplierManagementAll, updateProcurementSuppliesList} from "../../../../assets/api/api";

export default {
  data() {
    return {
      dialogVisible: false,
      model: {
        consumablesType: undefined,
        consumablesIcon: undefined,
        attachment: undefined,
      },
      options: [],
      procurementSuppliesContentOptions: [],
      userOptions: [],
      supplierOptions: [],
      rules: {
        consumablesType: [{ required: true, message: '请选择耗材类型', trigger: 'blur' }],
      },
    }
  },
  props: {
    contentsId: {
      type: Number,
      required: true,
    }
  },
  computed: {
    action() {
      return `${this.javaApi}/${this.$api.personnel.saveCNASFile}`
    }
  },
  mounted() {
    this.selectEnumByCategory()
    this.findProcurementSuppliesContentOptions()
    this.findUserOptions()
    this.findSupplierOptions()
  },
  methods: {
    // é‡ç½®è¡¨å•
    resetForm() {
      this.$refs.modelForm.resetFields();
      this.dialogVisible = false
    },
    openDialog(row) {
      if (row) {
        console.log("row", row)
        this.model = row
      } else {
        this.model = {}
      }
      this.dialogVisible = true
    },
    // èŽ·å–å­—å…¸
    selectEnumByCategory() {
      this.$axios.post(this.$api.enums.selectEnumByCategory, {
        category: "耗材类型"
      }).then(res => {
        this.options = res.data
      })
    },
    findProcurementSuppliesContentOptions() {
      this.$axios.get(this.$api.procurementSuppliesContents.getNodeNames, {}).then(res => {
        if (res.code === 200) {
          this.procurementSuppliesContentOptions = res.data
        }
      })
    },
    findUserOptions() {
      this.$axios.get(this.$api.procurementSuppliesContents.getUserList, {}).then(res => {
        if (res.code === 200) {
          this.userOptions = res.data
        }
      })
    },
    findSupplierOptions() {
      this.$axios.get(selectSupplierManagementAll, {}).then(res => {
        if (res.code === 200) {
          this.supplierOptions = res.data
        }
      })
    },
    async onSuccessIcon(response) {
      this.$set(this.model, "consumablesIcon", response.data)
    },
    async onSuccessFile(response) {
      this.$set(this.model, "attachment", response.data)
    },
    submit() {
      this.$refs.modelForm.validate((valid) => {
        if (valid) {
          this.model.contentsId = this.model.contentId
          if (this.model.id) {
            this.$axios.post(updateProcurementSuppliesList, this.model, {
              headers: {
                'Content-Type': 'application/json'
              }
            }).then(res => {
              if (res.code === 200) {
                this.dialogVisible = false
              }
            })
          } else {
            this.$axios.post(addProcurementSuppliesList, this.model, {
              headers: {
                'Content-Type': 'application/json'
              }
            }).then(res => {
              if (res.code === 200) {
                this.dialogVisible = false
                this.$emit('submit')
              }
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped>
>>>.el-dialog {
  margin: 6vh auto 50px !important;
}
>>> .el-dialog__body {
  max-height: 42em;
  overflow-y: auto;
}
.rows {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
>>>.el-form-item__content {
  line-height: 39px;
}
</style>

 src/components/do/a6.service-and-supply-purchase/contents.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,297 @@
<template>
  <div class="parent-class">
    <div style="display: flex; justify-content: flex-end; margin-right: 20px">
      <el-button
        type="primary"
        @click="addContents"
        size="small"
        icon="el-icon-plus"
        >添加子节点</el-button
      >
      <el-button
        type="danger"
        @click="deletetContents"
        size="small"
        icon="el-icon-delete"
        >删除子节点</el-button
      >
      <el-button
        type="warning"
        @click="updateContents"
        size="small"
        icon="el-icon-edit"
        >更新子节点</el-button
      >
    </div>
    <el-form label-width="100px">
      <el-form-item label="节点名称">
        <el-input
          v-model="form.nodeName"
          style="width: 200px"
          size="small"
        ></el-input>
      </el-form-item>
      <el-form-item label="代号">
        <el-input
          v-model="form.code"
          style="width: 200px"
          size="small"
        ></el-input>
      </el-form-item>
    </el-form>

    <!-- æ–°å¢žå¼¹æ¡† -->
    <el-dialog title="添加节点" :visible.sync="dialogVisible" width="40%">
      <el-form
        label-width="100px"
        :model="addForm"
        ref="addForm"
        :rules="rules"
      >
        <el-form-item label="父节点名称">
          <!-- <el-select v-model="addForm.parentId">
              <el-option v-for="(item,index) in nodeNames" :key="index" :label="item.nodeName" :value="item.id"></el-option>
            </el-select> -->
          <el-cascader
            v-model="addForm.parentId"
            :options="treeData"
            :props="{ checkStrictly: true, value: 'id', label: 'nodeName' }"
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item label="节点名称" prop="nodeName">
          <el-input
            v-model="addForm.nodeName"
            style="width: 200px"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="代号">
          <el-input
            v-model="addForm.code"
            style="width: 200px"
            size="small"
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 æ¶ˆ</el-button>
        <el-button type="primary" @click="submitForm">ç¡® å®š</el-button>
      </span>
    </el-dialog>
  </div>
</template>
  <script>
import {
  suppliersDirectoryContentsAddSuppliersDirectoryContents,
  suppliersDirectoryContentsUpdateSuppliersDirectoryContents,
  suppliersDirectoryContentsDeleteSuppliersDirectoryContentsById,
  suppliersDirectoryContentsGetSuppliersDirectoryContentsNodeNames
} from '@/assets/api/api'
export default {
  props: {
    id: {
      type: Number,
      default: 0,
    },
    treeData: {
      type: Array,
      default: () => [],
    },
    from: {
      type: String,
      default: "耗材树"
    }
  },
  data() {
    return {
      nodeNames: [],
      users: [],
      dialogVisible: false,
      form: {
        nodeName: "",
        code: "",
      },
      addForm: {
        nodeName: "",
        code: "",
        parentId: null,
      },
      rules: {
        nodeName: [
          { required: true, message: "请输入节点名称", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    if (this.id !== 0) {
      this.getContentsDetail();
    }
    this.getNodeNames();
    this.getUserList();
  },
  watch: {
    id(newVal, oldVal) {
      if (newVal !== 0) {
        console.log(newVal, oldVal);
        this.getContentsDetail();
      }
    },
  },
  methods: {
    // èŽ·å–目录详情
    getContentsDetail() {
      this.$axios
        .get(
          this.from=='耗材树'?(this.$api.procurementSuppliesContents.selectById + "?id=" + this.id):(this.$api.procurementSuppliesContents.selectSuppliersDirectoryContentsById + "?id=" + this.id)
        )
        .then((res) => {
          if (res.data == null) {
            this.form = {
              nodeName: "",
              code: "",
            };
            return;
          }
          this.form = res.data;
        });
    },
    // æ–°å»º
    addContents() {
      this.dialogVisible = true;
      this.resetForm();
    },
    resetForm() {
      this.addForm = {
        nodeName: "",
        code: "",
        parentId: null,
      };
    },
    submitForm() {
      let flag = true;
      this.$refs.addForm.validate((valid) => {
        if (!valid) {
          flag = false;
          return false;
        }
      });
      if (this.addForm.parentId) {
        this.addForm.parentId =
          this.addForm.parentId[this.addForm.parentId.length - 1];
      }
      if (!flag) {
        return;
      }

      this.$axios
        .post(
          this.from == '耗材树'
          ? this.$api.procurementSuppliesContents.add
          : suppliersDirectoryContentsAddSuppliersDirectoryContents,
          this.addForm,
          {
            headers: {
              "Content-Type": "application/json",
            },
          }
        )
        .then((res) => {
          if (res.code === 200) {
            this.$message.success("添加成功");
            this.dialogVisible = false;
            this.$emit("contentsUpdate", res.data);
            this.getContentsDetail();
          }
        });
    },
    // æ›´æ–°
    updateContents() {
      Object.keys(this.form).forEach((key) => {
        if (key == "children") {
          delete this.form[key];
        }
      });
      this.$axios
        .post(
          this.from == '耗材树'
          ? this.$api.procurementSuppliesContents.update
          : suppliersDirectoryContentsUpdateSuppliersDirectoryContents,

          this.form,
        {
          headers: {
            "Content-Type": "application/json",
          },
        })
        .then((res) => {
          if (res.code === 200) {
            this.$message.success("更新成功");
            this.$emit("contentsUpdate", this.id);
            this.dialogVisible = false;
            this.getContentsDetail();
          }
        });
    },
    // åˆ é™¤
    deletetContents() {
      if (
        this.form.id == null ||
        this.form.id == "" ||
        this.form.id == undefined
      ) {
        this.$message.error("请选择要删除的节点");
        return;
      }
      this.$confirm("此操作将删除该节点, æ˜¯å¦ç»§ç»­?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$axios
          .get(
            this.from == '耗材树'
            ? `${this.$api.procurementSuppliesContents.deleteById}?id=${this.form.id}`
            : `${suppliersDirectoryContentsDeleteSuppliersDirectoryContentsById}?id=${this.form.id}`
          )
          .then((res) => {
            if (res.code == 200) {
              this.$message.success("删除成功");
              this.$emit("contentsUpdate", this.form.parentId, true);
              this.getContentsDetail();
            }
          });
      });
    },
    // èŽ·å–所有目录节点
    getNodeNames() {
      this.$axios
        .get(
          this.from == '耗材树'
          ? this.$api.procurementSuppliesContents.getNodeNames
          : suppliersDirectoryContentsGetSuppliersDirectoryContentsNodeNames
        )
        .then((res) => {
          this.nodeNames = res.data;
        });
    },
    // èŽ·å–所有用户
    getUserList() {
      this.$axios
        .get(this.$api.procurementSuppliesContents.getUserList)
        .then((res) => {
          this.users = res.data;
        });
    },
  },
  created() {},
};
</script>

  <style scoped>
.parent-class {
  margin-top: 20px;
}
</style>

 src/components/view/a6-supplier-manage.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,154 @@
<template>
    <div class="purchase-page">
        <div class="purchase-left">
            <el-input v-model="form.nodeName" placeholder="请输入节点名称" suffix-icon="el-icon-search" size="small" clearable
                @keyup.enter.native="searchFilter(treeData)" @blur="searchFilter(treeData)"
                @clear="searchFilter(treeData)">
            </el-input>
            <el-tree ref="tree" :data="treeData" :props="defaultProps" @node-click="handleNodeClick"
                :default-expanded-keys="expandedKeys" node-key="id">
            </el-tree>
        </div>
        <div class="purchase-right">
            <el-tabs v-model="activeName" @tab-click="handleClick" style="height: 100%;">
                <el-tab-pane label="总览" name="1" style="height: 100%;">
                    <ConsumableOverview v-if="activeName == '1'" ref="consumableOverviewRef" :contentsId="contentsId" style="height: 100%;"></ConsumableOverview>
                </el-tab-pane>
                <el-tab-pane label="合格供方名录" name="2">
                    <QualifiedSuppliers v-if="activeName == '2'" :contentsId="contentsId"></QualifiedSuppliers>
                </el-tab-pane>
                <el-tab-pane label="目录维护" name="3">
                    <Contents
                        v-if="activeName == '3'"
                        :id="contentsId"
                        :treeData="treeData"
                        @contentsUpdate="contentsUpdate"
                        from="供应树"
                    ></Contents>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<script>
import Contents from "@/components/do/a6.service-and-supply-purchase/contents.vue";
import ConsumableOverview from "@/components/caorui/6-6/ConsumableOverview/index.vue";
import QualifiedSuppliers from "@/components/caorui/6-6/QualifiedSuppliers/index.vue";
import {suppliersDirectoryContentsSuppliersDirectoryContentsListing } from "@/assets/api/api";
export default {
    components: {
        ConsumableOverview, QualifiedSuppliers, Contents
    },
    data() {
        return {
            contentsId: 0,
            activeName: "1",
            form: {
                nodeName: "",
            },
            treeData: [],
            expandedKeys: [],
            defaultProps: {
                children: "children",
                label: "nodeName",
            },
        }
    },
    mounted() {
        this.getTreeData();
    },
    methods: {
        searchFilter() {
            this.treeData = JSON.parse(JSON.stringify(this.treeData));
            this.expandedKeys = [];
            if (this.form.nodeName == "") {
                return;
            }
            const findNodesWithFiber = (nodes) => {
                nodes.forEach((node) => {
                    if (node.nodeName && node.nodeName.includes(this.form.nodeName)) {
                        this.expandedKeys.push(node.id);
                    }
                    if (node.children && node.children.length > 0) {
                        findNodesWithFiber(node.children);
                    }
                });
            };
            findNodesWithFiber(this.treeData);
        },
        // ç›®å½•ç»´æŠ¤æ›´æ–°
        contentsUpdate(val, flag = false) {
            if (val) {
                this.getTreeData();
                this.expandedKeys = [];
                if (flag) {
                    const findNodesWithFiber = (nodes) => {
                        nodes.forEach((item) => {
                            if (item.parentId == val) {
                                this.expandedKeys.push(item.id);
                            }
                            if (item.children && item.children.length > 0) {
                                findNodesWithFiber(item.children);
                            }
                        });
                    };
                    findNodesWithFiber(this.treeData);
                    this.expandedKeys = this.expandedKeys.filter((item) => item !== val);
                } else {
                    this.expandedKeys.push(val);
                }
            } else {
                this.getTreeData();
            }
        },
        // æŸ¥è¯¢æ‰€æœ‰ç›®å½•
        getTreeData() {
            this.$axios
                .get(suppliersDirectoryContentsSuppliersDirectoryContentsListing)
                .then((res) => {
                    this.treeData = res.data;
                });
        },
        // ç‚¹å‡»æ ‘节点
        handleNodeClick(data) {
            this.contentsId = data.id;
            // this.$refs.consumableOverviewRef.getTableData(data.id)
        },
        handleClick(tab, event) {
        },
    }
}
</script>

<style scoped>
.purchase-left {
    width: 250px;
    height: 100%;
    background: #fff;
    margin-right: 10px;
    border-radius: 16px;
    box-sizing: border-box;
    padding: 10px 16px;
    flex-shrink: 0;
}

.purchase-right {
    background: #fff;
    width: calc(100% - 15em);
    height: 100%;
    border-radius: 16px;
    box-sizing: border-box;
    padding: 10px 16px;
}

.purchase-page {
    display: flex;
    padding-top: 10px;
    padding-bottom: 10px;
    box-sizing: border-box;
    width: 100%;
}
>>>.el-tabs__content{
  height: calc(100% - 40px);
}
</style>

 src/components/view/a6.service-and-supply-purchase.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,178 @@
<template>
  <div class="purchase-page">
    <div class="purchase-left">
      <el-input
        v-model="form.nodeName"
        placeholder="请输入节点名称"
        suffix-icon="el-icon-search"
        size="small"
        clearable
        @keyup.enter.native="searchFilter(treeData)"
        @blur="searchFilter(treeData)"
        @clear="searchFilter(treeData)"
      >
      </el-input>
      <el-tree
        ref="tree"
        :data="treeData"
        :props="defaultProps"
        @node-click="handleNodeClick"
        :default-expanded-keys="expandedKeys"
        node-key="id"
      >
      </el-tree>
    </div>
    <div class="purchase-right">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="耗材总览" name="first" :lazy="true">
          <ConsumableOverview v-if="activeName == 'first'" :contentsId="contentsId"></ConsumableOverview>
        </el-tab-pane>
        <el-tab-pane label="耗材列表" name="second" :lazy="true">
          <ConsumableList v-if="activeName == 'second'" :contentsId="contentsId"></ConsumableList>
        </el-tab-pane>
        <el-tab-pane label="耗材入库" name="third" :lazy="true">
          <Store v-if="activeName == 'third'" :contentsId="contentsId"></Store>
        </el-tab-pane>
        <el-tab-pane label="目录维护" name="fourth" :lazy="true">
          <Contents
            v-if="activeName == 'fourth'"
            :id="contentsId"
            @contentsUpdate="contentsUpdate"
            :treeData="treeData"
            from="耗材树"
          ></Contents>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import Contents from "@/components/do/a6.service-and-supply-purchase/contents.vue";
import Store from "@/components/do/a6.service-and-supply-purchase/store.vue";
import ConsumableOverview from "@/components/do/a6.service-and-supply-purchase/ConsumableOverview.vue";
import ConsumableList from "@/components/do/a6.service-and-supply-purchase/ConsumableList.vue"

export default {
  data() {
    return {
      tabsKey: 0,
      contentsId: 0,
      activeName: "first",
      form: {
        nodeName: "",
      },
      treeData: [],
      expandedKeys: [],
      defaultProps: {
        children: "children",
        label: "nodeName",
      },
    };
  },
  components: {
    Contents,
    Store,
    ConsumableOverview,
    ConsumableList
  },
  watch: {
    contentsId(newVal, oldVal) {
      if(newVal != oldVal) {
        this.tabsKey = Math.random();
      }
    }
  },
  methods: {
    searchFilter() {
      this.treeData = JSON.parse(JSON.stringify(this.treeData));
      this.expandedKeys = [];
      if(this.form.nodeName == "") {
        return;
      }
      const findNodesWithFiber = (nodes) => {
        nodes.forEach((node) => {
          if (node.nodeName && node.nodeName.includes(this.form.nodeName)) {
            this.expandedKeys.push(node.id);
          }
          if (node.children && node.children.length > 0) {
            findNodesWithFiber(node.children);
          }
        });
      };
      findNodesWithFiber(this.treeData);
    },

    // ç›®å½•ç»´æŠ¤æ›´æ–°
    contentsUpdate(val, flag = false) {
      if (val) {
        this.getTreeData();
        this.expandedKeys = [];
        if (flag) {
          const findNodesWithFiber = (nodes) => {
            nodes.forEach((item) => {
              if (item.parentId == val) {
                this.expandedKeys.push(item.id);
              }
              if(item.children && item.children.length > 0) {
                findNodesWithFiber(item.children);
              }
            });
          };
          findNodesWithFiber(this.treeData);
          this.expandedKeys = this.expandedKeys.filter((item) => item !== val);
        } else {
          this.expandedKeys.push(val);
        }
      }else {
        this.getTreeData();
      }
    },
    // æŸ¥è¯¢æ‰€æœ‰ç›®å½•
    getTreeData() {
      this.$axios
        .get(this.$api.procurementSuppliesContents.directoryListing)
        .then((res) => {
          this.treeData = res.data;
        });
    },
    // ç‚¹å‡»æ ‘节点
    handleNodeClick(data) {
      this.contentsId = data.id;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
  created() {
    this.getTreeData();
  },
};
</script>

<style scoped>
.purchase-left {
  width: 250px;
  height: 100%;
  background: #fff;
  margin-right: 10px;
  border-radius: 16px;
  box-sizing: border-box;
  padding: 10px 16px;
  flex-shrink: 0;
}
.purchase-right {
  background: #fff;
  width: calc(100% - 15em);
  height: 100%;
  border-radius: 16px;
  box-sizing: border-box;
  padding: 10px 16px;
}
.purchase-page {
  display: flex;
  padding-top: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
  width: 100%;
}
</style>

 src/main.js

@@ -29,8 +29,8 @@
// const javaApi = 'http://10.1.13.77:8001';

// é€šä¿¡æ­£å¼åº“
Vue.prototype.LOCATIONVUE = "http://10.193.45.63:8080";
const javaApi = 'https://ztwxlims.ztt.cn:7443/lims/';
// Vue.prototype.LOCATIONVUE = "http://10.193.45.63:8080";
// const javaApi = 'https://ztwxlims.ztt.cn:7443/lims/';

// //云
// Vue.prototype.LOCATIONVUE = "http://114.132.189.42:8080";