|
|
@@ -0,0 +1,280 @@
|
|
|
+<template>
|
|
|
+ <view class="device-in-table">
|
|
|
+ <view class="head flex justify-between items-center">
|
|
|
+ <view class="title">设备出库时间</view>
|
|
|
+ </view>
|
|
|
+ <u-input v-model="inOutTime" type="select" :border="true" placeholder="请选择出库时间" @click="show = true" />
|
|
|
+
|
|
|
+ <u-calendar v-model="show" mode="date" @change="change"></u-calendar>
|
|
|
+ <view class="head flex justify-between items-center m-t-24rpx">
|
|
|
+ <view class="title">设备出库登记</view>
|
|
|
+ <u-button type="primary" plain @click="open" size="mini">新增</u-button>
|
|
|
+ </view>
|
|
|
+ <view class="list-box">
|
|
|
+ <view class="device-info-item" v-for="(item, index) in value" :key="index">
|
|
|
+ <view class="device-no">{{ item.deviceNo }}</view>
|
|
|
+ <view class="content">
|
|
|
+ <view class="item">型号：{{ item.deviceModel }}</view>
|
|
|
+ <view class="item">供应商：{{ item.supplierName }}</view>
|
|
|
+ <view class="item">运行状态：{{ item.deviceStatus }}</view>
|
|
|
+ <view class="item">总扫描数：{{ item.scanCount }}</view>
|
|
|
+ <view class="item">当前所在地：{{ item.location }}</view>
|
|
|
+ <view class="item">发往地：{{ item.address }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="foot flex justify-between items-center">
|
|
|
+ <text class="link" @click="previewImg(item)">查看快递单</text>
|
|
|
+ <view class="btn-box flex items-center">
|
|
|
+ <u-button type="error" size="mini">删除</u-button>
|
|
|
+ <u-button type="primary" size="mini" class="m-l-10rpx" @click="edit(item)">编辑</u-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <u-popup v-model="showPopup" mode="bottom" :mask-close-able="false" :closeable="true" :border-radius="28">
|
|
|
+ <view class="form-box">
|
|
|
+ <view class="f-item">
|
|
|
+ <view class="label">
|
|
|
+ <text class="red">*</text>
|
|
|
+ <text class="text">设备编号</text>
|
|
|
+ </view>
|
|
|
+ <u-input :value="deviceStr" type="select" :border="true" placeholder="请选择设备" @click="showSelect = true" />
|
|
|
+
|
|
|
+ <u-select v-model="showSelect" :list="deviceList" @confirm="confirm"></u-select>
|
|
|
+ </view>
|
|
|
+ <view class="f-item">
|
|
|
+ <view class="label">
|
|
|
+ <text class="red">*</text>
|
|
|
+ <text class="text">发往地</text>
|
|
|
+ </view>
|
|
|
+ <u-input v-model="curDeviceInfo.address" type="select" :border="true" placeholder="选择发往地" @click="showSelect2 = true" />
|
|
|
+ <u-select
|
|
|
+ v-model="showSelect2"
|
|
|
+ :default-value="curDeviceInfo.addressValue"
|
|
|
+ mode="mutil-column-auto"
|
|
|
+ :list="areaData"
|
|
|
+ @confirm="confirm2"
|
|
|
+ ></u-select>
|
|
|
+ </view>
|
|
|
+ <view class="f-item">
|
|
|
+ <view class="label">
|
|
|
+ <text class="red">*</text>
|
|
|
+ <text class="text">快递单拍照</text>
|
|
|
+ <UPLOADIMAGE :key="comKey" :config="{ length: 1, value: curDeviceInfo.imgList }" @getLists="getImages"></UPLOADIMAGE>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flex justify-between items-center p-b-50rpx">
|
|
|
+ <u-button class="flex-1" @click="showPopup = false">取消</u-button>
|
|
|
+ <u-button class="flex-1 m-l-30rpx" type="primary" @click="save">保存</u-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+ <u-toast ref="uToast" />
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { deviceCanOut } from '@/api/sop'
|
|
|
+ import UPLOADIMAGE from './UPLOAD_IMAGE.vue'
|
|
|
+ import { buildData } from '@/utils/area'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: 'DEVICEOUTTABLE',
|
|
|
+ components: { UPLOADIMAGE },
|
|
|
+ props: ['config', 'onChange'],
|
|
|
+ computed: {
|
|
|
+ deviceStr() {
|
|
|
+ return this.deviceList.find((item) => item.value == this.curDeviceInfo.deviceNo)?.label || ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ comKey: Date.now() + '',
|
|
|
+ inOutTime: '',
|
|
|
+ list: [],
|
|
|
+ show: false,
|
|
|
+ showPopup: false,
|
|
|
+ showSelect: false,
|
|
|
+ showSelect2: false,
|
|
|
+ deviceList: [],
|
|
|
+ value: [],
|
|
|
+ curDeviceInfo: {
|
|
|
+ deviceNo: '', //设备编号
|
|
|
+ deviceModel: '',
|
|
|
+ supplierName: '', //供应商
|
|
|
+ deviceStatus: '', //运行状态
|
|
|
+ scanCount: '', //总扫描量
|
|
|
+ location: '', //当前所在地
|
|
|
+ address: '', //发往地
|
|
|
+ addressValue: [], //发往地
|
|
|
+ basePhotoPath: '', //拍照
|
|
|
+ imgList: []
|
|
|
+ },
|
|
|
+ areaData: [],
|
|
|
+ areaCodeMap: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.value = this.config.value || []
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ const data = buildData(2)
|
|
|
+ const { areaData, areaCodeMap } = data
|
|
|
+ console.log('areaData:', areaData)
|
|
|
+ console.log('areaCodeMap:', areaCodeMap)
|
|
|
+ this.areaData = areaData
|
|
|
+ this.areaCodeMap = areaCodeMap
|
|
|
+ deviceCanOut().then((res) => {
|
|
|
+ res = [
|
|
|
+ {
|
|
|
+ deviceNo: 'XXXXXXXX0123',
|
|
|
+ deviceModel: '周大福',
|
|
|
+ supplierName: '似懂非懂',
|
|
|
+ deviceStatus: 'NORMAL',
|
|
|
+ scanCount: 20,
|
|
|
+ location: '武汉',
|
|
|
+ address: '',
|
|
|
+ basePhotoPath: ''
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ this.deviceList = res.map((item) => {
|
|
|
+ item.value = item.deviceNo
|
|
|
+ item.label = item.deviceModel
|
|
|
+ return item
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ previewImg(item) {
|
|
|
+ console.log('item.basePhotoPath:', item.basePhotoPath)
|
|
|
+ uni.previewImage({
|
|
|
+ indicator: 'none',
|
|
|
+ loop: false,
|
|
|
+ urls: [item.basePhotoPath]
|
|
|
+ })
|
|
|
+ },
|
|
|
+ showError(txt) {
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ title: txt,
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ save() {
|
|
|
+ if (!this.curDeviceInfo.deviceNo) {
|
|
|
+ this.showError('请选择设备')
|
|
|
+ return
|
|
|
+ } else if (!this.curDeviceInfo.address) {
|
|
|
+ this.showError('请选择发往地')
|
|
|
+ return
|
|
|
+ } else if (!this.curDeviceInfo.basePhotoPath) {
|
|
|
+ this.showError('请上传快递单照片')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.value.push({ ...this.curDeviceInfo })
|
|
|
+ this.showPopup = false
|
|
|
+ },
|
|
|
+ getImages(lists) {
|
|
|
+ this.curDeviceInfo.imgList = lists
|
|
|
+ this.curDeviceInfo.basePhotoPath = lists[0]?.url || ''
|
|
|
+ },
|
|
|
+ edit(item) {
|
|
|
+ console.log('item', item)
|
|
|
+ this.curDeviceInfo = { ...item }
|
|
|
+ this.comKey = Date.now() + ''
|
|
|
+ this.showPopup = true
|
|
|
+ },
|
|
|
+ open() {
|
|
|
+ this.curDeviceInfo = {
|
|
|
+ deviceNo: '', //设备编号
|
|
|
+ deviceModel: '',
|
|
|
+ supplierName: '', //供应商
|
|
|
+ deviceStatus: '', //运行状态
|
|
|
+ scanCount: '', //总扫描量
|
|
|
+ location: '', //当前所在地
|
|
|
+ address: '', //发往地
|
|
|
+ addressValue: [],
|
|
|
+ basePhotoPath: '', //拍照
|
|
|
+ imgList: []
|
|
|
+ }
|
|
|
+ this.comKey = Date.now() + ''
|
|
|
+ this.showPopup = true
|
|
|
+ },
|
|
|
+ change(obj) {
|
|
|
+ this.inOutTime = obj.result
|
|
|
+ },
|
|
|
+ confirm(arr) {
|
|
|
+ this.curDeviceInfo.deviceNo = arr[0].value
|
|
|
+ let item = this.deviceList.find((item) => item.deviceNo == arr[0].value)
|
|
|
+ for (let key in this.curDeviceInfo) {
|
|
|
+ if (item[key]) {
|
|
|
+ this.curDeviceInfo[key] = item[key]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ !this.curDeviceInfo.addressValue.length && (this.curDeviceInfo.addressValue = [])
|
|
|
+ },
|
|
|
+ confirm2(e) {
|
|
|
+ this.curDeviceInfo.address = e.map((item) => item.label).join('')
|
|
|
+ this.curDeviceInfo.addressValue = e.map((item) => item.value)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .device-in-table {
|
|
|
+ .list-box {
|
|
|
+ .device-info-item {
|
|
|
+ padding: 24rpx 0;
|
|
|
+ border-bottom: 1px solid #f0f0f0;
|
|
|
+ &:first-child {
|
|
|
+ padding-top: 0;
|
|
|
+ }
|
|
|
+ .foot {
|
|
|
+ margin-top: 10rpx;
|
|
|
+ .link {
|
|
|
+ color: $u-type-primary;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ padding: 24rpx;
|
|
|
+ .item {
|
|
|
+ color: #262626;
|
|
|
+ font-size: 24rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .device-no {
|
|
|
+ color: #262626;
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .form-box {
|
|
|
+ padding: 24rpx 24px 0 24px;
|
|
|
+ padding-top: 80rpx;
|
|
|
+ .f-item {
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ .label {
|
|
|
+ margin-bottom: 4rpx;
|
|
|
+ .red {
|
|
|
+ color: red;
|
|
|
+ margin-right: 4rpx;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ color: #595959;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .head {
|
|
|
+ .title {
|
|
|
+ color: #595959;
|
|
|
+ font-size: 28rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
刘洋