|
|
@@ -0,0 +1,170 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-drawer :visible.sync="showArea" size="44vw" :before-close="closeFn" custom-class="drawer-class" direction="rtl">
|
|
|
+ <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="confirmAdd(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>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'loan-item',
|
|
|
+ props: {
|
|
|
+ currentData: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ 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({name:this.search})
|
|
|
+ }
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.itemSearchRef.focus()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ closeFn() {
|
|
|
+ this.showArea = false;
|
|
|
+ },
|
|
|
+ confirmAdd(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.simpleList({name:this.search})
|
|
|
+ };
|
|
|
+ ctx.service({
|
|
|
+ page: logHost
|
|
|
+ })
|
|
|
+
|
|
|
+ .set('table', {
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ label: 'ID',
|
|
|
+ prop: 'id',
|
|
|
+ align: 'center',
|
|
|
+ width:80
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '图片',
|
|
|
+ prop: 'cover',
|
|
|
+ align: 'center',
|
|
|
+ width:65
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '名称',
|
|
|
+ prop: 'name',
|
|
|
+ align: 'center',
|
|
|
+ width:300
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '可借',
|
|
|
+ prop: 'stock',
|
|
|
+ align: 'center',
|
|
|
+ width:100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '要借',
|
|
|
+ prop: 'bigCount',
|
|
|
+ align: 'center',
|
|
|
+ width:130
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ op: {
|
|
|
+ visible: true,
|
|
|
+ props: {
|
|
|
+ width: 130,
|
|
|
+ align: 'center',
|
|
|
+ fixed: 'right',
|
|
|
+ label: '操作'
|
|
|
+ },
|
|
|
+ layout: ['slot-column-option']
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .set('layout', [
|
|
|
+ ['slot-option-area-list'],
|
|
|
+ [ 'data-table' ],
|
|
|
+ ['flex1']
|
|
|
+ ])
|
|
|
+ .done()
|
|
|
+ app.refresh({name:this.search})
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.drawer-class{
|
|
|
+ height:100vh;
|
|
|
+}
|
|
|
+::v-deep .el-input__inner {
|
|
|
+ padding:0;
|
|
|
+ text-align:center;
|
|
|
+}
|
|
|
+</style>
|
