预订明细操作完成

ghs/src/service/check-order/index.js

@@ -24,5 +24,12 @@ export class CheckOrderService extends BaseService {
 		});
 	}
 
+	loan(data) {
+		return this.request({
+			url: '/loan',
+			params: data
+		});
+	}
+
 }
 export default new CheckOrderService();

ghs/src/views/book/components/loan-item.vue

@@ -1,9 +1,40 @@
 <template>
 	<div>
-		<el-drawer :visible.sync="showArea" size="55vw" :before-close="closeFn" custom-class="drawer-class" direction="ltr">
+		<el-drawer :visible.sync="showArea" size="44vw" :before-close="closeFn" custom-class="drawer-class" direction="ltr">
 			<div>
-				<div style="margin-left:2px;font-weight:bold;">【{{ currentData.customName?currentData.customName:'' }}】{{ currentData.itemName?currentData.itemName:'' }} 借库存</div>
                 <x-crud @load="onLoad">
+
+                    <template #table-column-cover="{ scope }">
+                        <el-popover placement="right" width="200" trigger="hover">
+                            <div style="width:200px;height:200px;">
+                                <img style="width:100%;height:100%;object-fit: cover;" :src="scope.row.bigCover" />
+                            </div>
+                            <div style="width:40px;" slot="reference">
+                                <img style="width:100%;height:100%;object-fit: cover;border-radius:5px;" :src="scope.row.cover" />
+                            </div>
+                        </el-popover>
+                    </template>
+
+                    <template #table-column-name="{ scope }">
+                        <span style="font-size:16px;">{{ scope.row.name }}</span>
+                    </template>
+
+                    <template #table-column-stock="{ scope }">
+                        <span style="font-size:13px;">{{ scope.row.stock?parseFloat(scope.row.stock):0 }}</span>
+                    </template>
+
+                    <template #table-column-bigCount="{ scope }">
+                        <el-input v-model="scope.row.bigCount" placeholder="数量"></el-input>
+                    </template>
+
+                    <template #slot-column-option="{scope}">
+                        <el-button @click.stop="confirmLoan(scope.row)" size="medium" type="primary">借用</el-button>
+                    </template>
+
+                    <template #slot-option-area-list>
+                        <el-input v-model="search" placeholder="搜索花材" size="big" style="width:200px;" :clearable="true" ref="itemSearchRef" @input="changeSearch()" @focus="search=''"></el-input>
+                        <span style="margin-left:10px;font-size:27px;">【{{ currentData.customName?currentData.customName:'' }}】{{ currentData.itemName?currentData.itemName:'' }} 借库存</span>
+                    </template>
                 </x-crud>
 			</div>
 		</el-drawer>
@@ -20,24 +51,54 @@ export default {
 	},
 	data() {
 		return {
-			showArea: false
+			showArea: false,
+            search:''
 		};
 	},
 	methods: {
+		changeSearch(){
+            let that = this
+            if(this.T != null){
+                clearTimeout(this.T)
+            }
+            this.T = setTimeout(function(){
+                that.app.refresh({name:this.search})
+            },650)
+		},
 		init() {
 			this.showArea = true
+            this.search = ''
 			if(this.app){
-				this.app.refresh()
+				this.app.refresh({name:this.search})
 			}
+            this.$nextTick(() => {
+                this.$refs.itemSearchRef.focus()
+            })
 		},
 		closeFn() {
 			this.showArea = false;
 		},
+        confirmLoan(info){
+			let that = this
+			if(Number(info.bigCount)<=0){
+                this.$message.error('请填写数量')
+				return false
+			}
+            let params = {inId:this.currentData.itemId,outId:info.id,num:info.bigCount,bookItemCustomId:this.currentData.id}
+            this.$confirm('确认借用？', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {
+                this.$service.checkOrder.loan(params).then(res => {
+					that.$message.success('操作成功')
+					setTimeout(()=>{
+						this.showArea = false
+					},1300)
+                })
+            })
+        },
 		onLoad({ ctx, app }) {
 			this.app = app;
 
 			let logHost = () => {
-				return this.$service.item.getLoanList()
+				return this.$service.item.getLoanList({name:this.search})
 			};
 			ctx.service({
 				page: logHost
@@ -45,49 +106,55 @@ export default {
 
 			.set('table', {
 				columns: [
-					{
-						label: '日期',
-						prop: 'addTime',
+                    {
+						label: 'ID',
+						prop: 'id',
 						align: 'center',
+                        width:80
 					},
 					{
-						label: '名称',
-						prop: 'relateName',
+						label: '图片',
+						prop: 'cover',
 						align: 'center',
+                        width:65
 					},
 					{
-						label: '事项',
-						prop: 'typeName',
+						label: '名称',
+						prop: 'name',
 						align: 'center',
+                        width:300
 					},
 					{
-						label: '变动',
-						prop: 'bigNumOrder',
+						label: '可借',
+						prop: 'stock',
 						align: 'center',
+                        width:100
 					},
 					{
-						label: '剩余',
-						prop: 'bigNumStock',
+						label: '要借',
+						prop: 'bigCount',
 						align: 'center',
+                        width:130
 					}
 				],
 				op: {
 					visible: true,
 					props: {
-						width: 160,
+						width: 130,
 						align: 'center',
 						fixed: 'right',
 						label: '操作'
 					},
-					layout: []
+					layout: ['slot-column-option']
 				}
 			})
 			.set('layout', [
+                ['slot-option-area-list'],
 				[ 'data-table' ],
-				['flex1', 'pagination']
+				['flex1']
 			])
 			.done()
-			app.refresh()
+			app.refresh({name:this.search})
 		}
 	}
 };
@@ -96,4 +163,8 @@ export default {
 .drawer-class{
 	height:100vh;
 }
+::v-deep .el-input__inner {
+  padding:0;
+  text-align:center;
+}
 </style>