From 4d85cda3ac4a727373e27eeaaf44fb478518ac83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=86=8A=E4=B8=BD=E5=90=9B?= <664953382@qq.com>
Date: Thu, 23 Dec 2021 17:20:24 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/chartList/page2/three/index.vue   |  12 +-
 src/views/chartList/page2/three/indexApi.js |  24 ++-
 src/views/chartList/page2/three/left3.vue   | 172 ++++++++++++++++++++
 src/views/chartList/page2/three/left4.vue   | 172 ++++++++++++++++++++
 4 files changed, 370 insertions(+), 10 deletions(-)
 create mode 100644 src/views/chartList/page2/three/left3.vue
 create mode 100644 src/views/chartList/page2/three/left4.vue

diff --git a/src/views/chartList/page2/three/index.vue b/src/views/chartList/page2/three/index.vue
index b865822..de04b88 100644
--- a/src/views/chartList/page2/three/index.vue
+++ b/src/views/chartList/page2/three/index.vue
@@ -4,9 +4,11 @@
 		<left1 />
 		<el-divider content-position="left"><span class="text-bold-18">生产计划</span></el-divider>
 		<left2 />
-		<!-- <el-divider content-position="left"><span class="text-bold-18">型号原材料及配套件</span></el-divider>
+		<el-divider content-position="left"><span class="text-bold-18">型号原材料及配套件</span></el-divider>
 		<left3 />
-    型号生产统计 不需要录入接口
+		<el-divider content-position="left"><span class="text-bold-18">原材料和配套件库存</span></el-divider>
+		<left4 />
+		<!-- 型号生产统计 不需要录入接口
 		<el-divider content-position="left"><span class="text-bold-18">型号生产统计</span></el-divider>
 		<center1 /> -->
 		<el-divider content-position="left"><span class="text-bold-18">型号工位</span></el-divider>
@@ -20,7 +22,8 @@
 <script>
 import left1 from './left1.vue'
 import left2 from './left2.vue'
-// import left3 from './left3.vue'
+import left3 from './left3.vue'
+import left4 from './left4.vue'
 // import center1 from './center1.vue'
 import center2 from './center2.vue'
 import right1 from './right1.vue'
@@ -29,7 +32,8 @@ export default {
 	components: {
 		left1,
 		left2,
-		// left3,
+		left3,
+		left4,
 		// center1,
 		center2,
 		right1,
diff --git a/src/views/chartList/page2/three/indexApi.js b/src/views/chartList/page2/three/indexApi.js
index 2344cba..f72414f 100644
--- a/src/views/chartList/page2/three/indexApi.js
+++ b/src/views/chartList/page2/three/indexApi.js
@@ -26,22 +26,34 @@ export function leftTwoList(params) {
 export function leftTwoImportTemplate() {
 	return request({
 		url: '/hx/productionPlan/importTemplate',
-		// url: '/hx/materialsAccessories/importTemplate', // left
-		// url: '/hx/stockDetailed/importTemplate', // right
 	})
 }
 /** --------------- left3 --------------- */
-//
+// 型号原材料及配套件列表
 export function leftThreeList(params) {
 	return request({
-		url: '/hx/milepostAndBottleneck/list',
+		url: '/hx/materialsAccessories/list',
 		params,
 	})
 }
-//
+// 导出模板
 export function leftThreeImportTemplate() {
 	return request({
-		url: '/hx/milepostAndBottleneck/importTemplate',
+		url: '/hx/materialsAccessories/importTemplate', // left
+	})
+}
+/** --------------- left4 --------------- */
+// 原材料和配套件库存列表
+export function leftFourList(params) {
+	return request({
+		url: '/hx/stockDetailed/list',
+		params,
+	})
+}
+// 导出模板
+export function leftFourImportTemplate() {
+	return request({
+		url: '/hx/stockDetailed/importTemplate', // right
 	})
 }
 // /** --------------- center1 --------------- */
diff --git a/src/views/chartList/page2/three/left3.vue b/src/views/chartList/page2/three/left3.vue
new file mode 100644
index 0000000..5b19451
--- /dev/null
+++ b/src/views/chartList/page2/three/left3.vue
@@ -0,0 +1,172 @@
+<template>
+	<el-row :gutter="20">
+		<!--用户数据-->
+		<el-col :span="24" :xs="24">
+			<el-row :gutter="10" class="mb8 fr">
+				<el-col :span="1.5">
+					<el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport">导入</el-button>
+				</el-col>
+				<el-col :span="1.5">
+					<el-button
+						type="warning"
+						plain
+						icon="el-icon-download"
+						size="mini"
+						:loading="exportLoading"
+						@click="importTemplate"
+						>导出模板</el-button
+					>
+				</el-col>
+			</el-row>
+
+			<el-table v-loading="loading" :data="userList">
+				<el-table-column label="序号" align="center" prop="id" width="80" />
+				<el-table-column label="类型(原材料/配套件)" align="center" prop="category" />
+				<el-table-column label="型号名称" align="center" prop="name" />
+				<el-table-column label="现有可满足生产台数" align="center" prop="existing" />
+				<el-table-column label="到货数量" align="center" prop="arrival" />
+				<el-table-column label="已用数量" align="center" prop="used" />
+				<el-table-column label="缺少数量" align="center" prop="lack" />
+			</el-table>
+
+			<pagination
+				v-show="total > 0"
+				:total="total"
+				:autoScroll="false"
+				:pageSizes="[2, 5, 10, 20]"
+				:page.sync="queryParams.pageNum"
+				:limit.sync="queryParams.pageSize"
+				@pagination="getList"
+			/>
+		</el-col>
+		<!-- 用户导入对话框 -->
+		<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
+			<el-upload
+				ref="upload"
+				:limit="1"
+				accept=".xlsx, .xls"
+				:headers="upload.headers"
+				:action="upload.url"
+				:disabled="upload.isUploading"
+				:on-progress="handleFileUploadProgress"
+				:on-success="handleFileSuccess"
+				:auto-upload="false"
+				drag
+			>
+				<i class="el-icon-upload"></i>
+				<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+				<div class="el-upload__tip" slot="tip">
+					<!-- <div class="el-upload__tip" slot="tip">
+						<el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
+					</div> -->
+					<span>仅允许导入xls、xlsx格式文件。</span>
+					<!-- <el-link
+						type="primary"
+						:underline="false"
+						style="font-size: 12px; vertical-align: baseline"
+						@click="importTemplate"
+						>下载模板</el-link
+					> -->
+				</div>
+			</el-upload>
+			<div slot="footer" class="dialog-footer">
+				<el-button type="primary" @click="submitFileForm">确 定</el-button>
+				<el-button @click="upload.open = false">取 消</el-button>
+			</div>
+		</el-dialog>
+	</el-row>
+</template>
+<script>
+import { leftThreeList, leftThreeImportTemplate } from './indexApi'
+import { getToken } from '@/utils/auth'
+export default {
+	data() {
+		return {
+			// 遮罩层
+			loading: true,
+			// 导出遮罩层
+			exportLoading: false,
+			// 查询参数
+			queryParams: {
+				pageNum: 1,
+				pageSize: this.page_size,
+			},
+			// 用户信息
+			userList: [],
+			// 总条数
+			total: 0,
+			// 用户导入参数
+			upload: {
+				// 是否显示弹出层（用户导入）
+				open: false,
+				// 弹出层标题（用户导入）
+				title: '',
+				// 是否禁用上传
+				isUploading: false,
+				// 是否更新已经存在的用户数据
+				updateSupport: 0,
+				// 设置上传的请求头部
+				headers: { Authorization: 'Bearer ' + getToken() },
+				// 上传的地址
+				url: process.env.VUE_APP_BASE_API + '/hx/materialsAccessories/importData',
+			},
+		}
+	},
+	methods: {
+		/** 查询用户列表 */
+		getList() {
+			this.loading = true
+			leftThreeList(this.queryParams).then(res => {
+				this.userList = res.rows
+				this.total = res.total
+				this.loading = false
+			})
+		},
+		/** 导出按钮操作 */
+		handleExport() {
+			const queryParams = this.queryParams
+			this.$modal
+				.confirm('是否确认导出所有用户数据项？')
+				.then(() => {
+					this.exportLoading = true
+					return exportUser(queryParams)
+				})
+				.then(response => {
+					this.$download.name(response.msg)
+					this.exportLoading = false
+				})
+				.catch(() => {})
+		},
+		/** 导入按钮操作 */
+		handleImport() {
+			this.upload.title = '数据导入'
+			this.upload.open = true
+		},
+		/** 下载模板操作 */
+		importTemplate() {
+			leftThreeImportTemplate().then(response => {
+				this.$download.name(response.msg)
+			})
+		},
+		// 文件上传中处理
+		handleFileUploadProgress(event, file, fileList) {
+			this.upload.isUploading = true
+		},
+		// 文件上传成功处理
+		handleFileSuccess(response, file, fileList) {
+			this.upload.open = false
+			this.upload.isUploading = false
+			this.$refs.upload.clearFiles()
+			this.$alert(response.msg, '导入结果', { dangerouslyUseHTMLString: true })
+			this.getList()
+		},
+		// 提交上传文件
+		submitFileForm() {
+			this.$refs.upload.submit()
+		},
+	},
+	created() {
+		this.getList()
+	},
+}
+</script>
diff --git a/src/views/chartList/page2/three/left4.vue b/src/views/chartList/page2/three/left4.vue
new file mode 100644
index 0000000..c2e3c2f
--- /dev/null
+++ b/src/views/chartList/page2/three/left4.vue
@@ -0,0 +1,172 @@
+<template>
+	<el-row :gutter="20">
+		<!--用户数据-->
+		<el-col :span="24" :xs="24">
+			<el-row :gutter="10" class="mb8 fr">
+				<el-col :span="1.5">
+					<el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport">导入</el-button>
+				</el-col>
+				<el-col :span="1.5">
+					<el-button
+						type="warning"
+						plain
+						icon="el-icon-download"
+						size="mini"
+						:loading="exportLoading"
+						@click="importTemplate"
+						>导出模板</el-button
+					>
+				</el-col>
+			</el-row>
+
+			<el-table v-loading="loading" :data="userList">
+				<el-table-column label="序号" align="center" prop="id" width="80" />
+				<el-table-column label="分类(原材料/配套件)" align="center" prop="category" />
+				<el-table-column label="项目名称" align="center" prop="projectName" />
+				<el-table-column label="原材料或配套件的名称" align="center" prop="name" />
+				<el-table-column label="数量" align="center" prop="total" />
+				<el-table-column label="到货数量" align="center" prop="arrivalTotal" />
+				<el-table-column label="已用数量" align="center" prop="usedTotal" />
+			</el-table>
+
+			<pagination
+				v-show="total > 0"
+				:total="total"
+				:autoScroll="false"
+				:pageSizes="[2, 5, 10, 20]"
+				:page.sync="queryParams.pageNum"
+				:limit.sync="queryParams.pageSize"
+				@pagination="getList"
+			/>
+		</el-col>
+		<!-- 用户导入对话框 -->
+		<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
+			<el-upload
+				ref="upload"
+				:limit="1"
+				accept=".xlsx, .xls"
+				:headers="upload.headers"
+				:action="upload.url"
+				:disabled="upload.isUploading"
+				:on-progress="handleFileUploadProgress"
+				:on-success="handleFileSuccess"
+				:auto-upload="false"
+				drag
+			>
+				<i class="el-icon-upload"></i>
+				<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+				<div class="el-upload__tip" slot="tip">
+					<!-- <div class="el-upload__tip" slot="tip">
+						<el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
+					</div> -->
+					<span>仅允许导入xls、xlsx格式文件。</span>
+					<!-- <el-link
+						type="primary"
+						:underline="false"
+						style="font-size: 12px; vertical-align: baseline"
+						@click="importTemplate"
+						>下载模板</el-link
+					> -->
+				</div>
+			</el-upload>
+			<div slot="footer" class="dialog-footer">
+				<el-button type="primary" @click="submitFileForm">确 定</el-button>
+				<el-button @click="upload.open = false">取 消</el-button>
+			</div>
+		</el-dialog>
+	</el-row>
+</template>
+<script>
+import { leftFourList, leftFourImportTemplate } from './indexApi'
+import { getToken } from '@/utils/auth'
+export default {
+	data() {
+		return {
+			// 遮罩层
+			loading: true,
+			// 导出遮罩层
+			exportLoading: false,
+			// 查询参数
+			queryParams: {
+				pageNum: 1,
+				pageSize: this.page_size,
+			},
+			// 用户信息
+			userList: [],
+			// 总条数
+			total: 0,
+			// 用户导入参数
+			upload: {
+				// 是否显示弹出层（用户导入）
+				open: false,
+				// 弹出层标题（用户导入）
+				title: '',
+				// 是否禁用上传
+				isUploading: false,
+				// 是否更新已经存在的用户数据
+				updateSupport: 0,
+				// 设置上传的请求头部
+				headers: { Authorization: 'Bearer ' + getToken() },
+				// 上传的地址
+				url: process.env.VUE_APP_BASE_API + '/hx/stockDetailed/importData',
+			},
+		}
+	},
+	methods: {
+		/** 查询用户列表 */
+		getList() {
+			this.loading = true
+			leftFourList(this.queryParams).then(res => {
+				this.userList = res.rows
+				this.total = res.total
+				this.loading = false
+			})
+		},
+		/** 导出按钮操作 */
+		handleExport() {
+			const queryParams = this.queryParams
+			this.$modal
+				.confirm('是否确认导出所有用户数据项？')
+				.then(() => {
+					this.exportLoading = true
+					return exportUser(queryParams)
+				})
+				.then(response => {
+					this.$download.name(response.msg)
+					this.exportLoading = false
+				})
+				.catch(() => {})
+		},
+		/** 导入按钮操作 */
+		handleImport() {
+			this.upload.title = '数据导入'
+			this.upload.open = true
+		},
+		/** 下载模板操作 */
+		importTemplate() {
+			leftFourImportTemplate().then(response => {
+				this.$download.name(response.msg)
+			})
+		},
+		// 文件上传中处理
+		handleFileUploadProgress(event, file, fileList) {
+			this.upload.isUploading = true
+		},
+		// 文件上传成功处理
+		handleFileSuccess(response, file, fileList) {
+			this.upload.open = false
+			this.upload.isUploading = false
+			this.$refs.upload.clearFiles()
+			this.$alert(response.msg, '导入结果', { dangerouslyUseHTMLString: true })
+			this.getList()
+		},
+		// 提交上传文件
+		submitFileForm() {
+			this.$refs.upload.submit()
+		},
+	},
+	created() {
+		this.getList()
+	},
+}
+</script>