You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
344 lines
9.9 KiB
344 lines
9.9 KiB
<template>
|
|
<view class="v-pages">
|
|
<view class="v-form v-container" style="padding-bottom: 120rpx;">
|
|
<uni-forms :modelValue="formData" ref="formRef" :label-width="80" :rules="formRules">
|
|
<view class="v-form-item base" @click="goBase()">
|
|
<view class="row">
|
|
<view class="col">切换基地</view>
|
|
<uni-icons type="right" size="14" class="v-icon" color="#fff"></uni-icons>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="v-form-item">
|
|
<uni-forms-item label="基地名称" name="baseName">
|
|
<input v-model="formData.baseName" placeholder="请输入基地名称" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="所属企业" name="companyId">
|
|
<picker @change="CompanyChange" :value="CurrentCompany" :range="CompanyPickerList">
|
|
<view class="uni-input" v-if="CompanyPickerList[CurrentCompany]">
|
|
{{CompanyPickerList[CurrentCompany]}}
|
|
</view>
|
|
<view v-else class="placeholder">请选择所属企业</view>
|
|
<uni-icons type="down" size="14" class="v-icon"></uni-icons>
|
|
</picker>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="基地区域" name="address">
|
|
<view @tap="startOpen">
|
|
<text
|
|
v-if="LocalData">{{LocalData.provinceName}}/{{LocalData.cityName}}/{{LocalData.areaName}}</text>
|
|
<text class="placeholder" v-else>请选择所在地区</text>
|
|
<uni-icons type="down" size="14"></uni-icons>
|
|
</view>
|
|
<cityPicker :column="column" :default-value="defaultValue" :mask-close-able="startMaskCloseAble"
|
|
@confirm="startConfirm" @cancel="startCancel" :visible="startVisible" />
|
|
|
|
</uni-forms-item>
|
|
<uni-forms-item label="基地地址" name="baseAddress">
|
|
<input v-model="formData.baseAddress" placeholder="请输入基地地址" class="m-form-small" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="基地面积(亩)" name="baseArea":label-width="120">
|
|
<input v-model="formData.baseArea" placeholder="请输入基地面积" class="m-form-small" type="digit" @blur="handlerInput($event,index)" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="负责人" name="baseLeader">
|
|
<input v-model="formData.baseLeader" placeholder="请输入负责人" class="m-form-small" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="联系电话" name="basePhone">
|
|
<input v-model="formData.basePhone" placeholder="请输入联系电话" type="digit" class="m-form-small" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="基地简介" name="baseDescription">
|
|
<rich-text :nodes="formData.baseDescription"></rich-text>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="基地图片" name="baseImage">
|
|
<htz-image-upload v-model="imgList" :action="baseUrls" :chooseNum="1" :compress="false"
|
|
:headers="headers" :max="1" :quality="80" :remove="true" :sourceType="['album', 'camera']"
|
|
class="m-img-upload" mediaType="image" @imgDelete="ceshiImgDelete"
|
|
@uploadFail="ceshiUploadFail" @uploadSuccess="ceshiUploadSuccess"></htz-image-upload>
|
|
<uni-easyinput v-model="formData.companyLicense" class="not-show" placeholder=" " />
|
|
</uni-forms-item>
|
|
</view>
|
|
</uni-forms>
|
|
<!-- 页面 提交 -->
|
|
<view class="fixed fixedBottom v-container"><button class="v-primary-btn large" @click="submitForm()">保存</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import * as BaseApi from '@/api/traceability/base'
|
|
import * as areaApi from '@/api/system/area'
|
|
|
|
import * as customApi from "@/api/traceability/custom"
|
|
import addressList from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/cityData.js'
|
|
|
|
import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
|
|
|
|
import {
|
|
getAccessToken
|
|
} from '@/utils/auth';
|
|
import config from '@/config';
|
|
import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue';
|
|
|
|
|
|
export default {
|
|
components: {
|
|
cityPicker,
|
|
htzImageUpload
|
|
},
|
|
data() {
|
|
return {
|
|
imgList: [],
|
|
baseUrls: config.baseUrl + config.baseApi + '/infra/file/upload',
|
|
headers: {
|
|
Authorization: 'Bearer ' + getAccessToken()
|
|
}, // 设置上传的请求头部
|
|
|
|
defaultValue: '',
|
|
column: 3,
|
|
startVisible: false,
|
|
startMaskCloseAble: true,
|
|
addressList: [],
|
|
LocalData: {
|
|
provinceName: null,
|
|
cityName: null,
|
|
cityName: null,
|
|
provinceCode: null,
|
|
cityCode: null,
|
|
cityCode: null,
|
|
},
|
|
formData: {
|
|
id: undefined,
|
|
baseName: undefined,
|
|
companyId: undefined,
|
|
province: undefined,
|
|
city: undefined,
|
|
district: undefined,
|
|
baseAddress: undefined,
|
|
latitude: undefined,
|
|
longitude: undefined,
|
|
baseArea: undefined,
|
|
baseLeader: undefined,
|
|
baseStatus: undefined,
|
|
basePhone: undefined,
|
|
baseDescription: undefined,
|
|
baseImage: undefined,
|
|
startRegion: undefined,
|
|
},
|
|
// 表单校验
|
|
formRules: {
|
|
baseName: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '请输入基地名称'
|
|
}]
|
|
},
|
|
companyId: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '请选择所属企业'
|
|
}]
|
|
},
|
|
baseLeader: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '请输入负责人'
|
|
}]
|
|
},
|
|
baseName: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '请输入基地名称'
|
|
}]
|
|
},
|
|
baseArea: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '请输入基地面积'
|
|
}]
|
|
},
|
|
baseAddress: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '请输入基地详细地址'
|
|
}]
|
|
},
|
|
basePhone: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '请输入联系电话'
|
|
}, ]
|
|
}
|
|
},
|
|
|
|
baseId: this.$store.state.user.baseId,
|
|
CurrentCompany: undefined,
|
|
CompanyList: [], //所属企业列表
|
|
CompanyPickerList: [], //所属企业选择列表
|
|
|
|
provinceList: [],
|
|
cityList: [],
|
|
areaList: [],
|
|
}
|
|
},
|
|
onLoad: function() {
|
|
this.getListData()
|
|
},
|
|
onReady() {
|
|
// 设置自定义表单校验规则，必须在节点渲染完毕后执行
|
|
this.$refs.formRef.setRules(this.formRules)
|
|
},
|
|
methods: {
|
|
async getAddressList() {
|
|
try {
|
|
const res = await areaApi.getAreaTree()
|
|
this.addressList = res.data
|
|
} finally {}
|
|
},
|
|
// 获取产品数据
|
|
async getListData() {
|
|
try {
|
|
await this.getCompany()
|
|
await this.getAddressList()
|
|
const res = await BaseApi.getBase(this.baseId)
|
|
this.formData = res.data
|
|
console.log('lai',this.formData)
|
|
|
|
// 初始化当前公司
|
|
this.CompanyList.map((item, index, arr) => {
|
|
if (item.companyId === this.formData.companyId) {
|
|
this.CurrentCompany = index
|
|
}
|
|
})
|
|
|
|
this.provinceList = this.addressList.find((item, index) => {
|
|
return item.id == this.formData.province;
|
|
})
|
|
|
|
this.cityList = this.provinceList.children.find((item, index) => {
|
|
return item.id == this.formData.city;
|
|
})
|
|
|
|
this.areaList = this.cityList.children.find((item, index) => {
|
|
return item.id == this.formData.district;
|
|
})
|
|
|
|
this.LocalData.provinceName = this.provinceList.name
|
|
this.LocalData.cityName = this.cityList.name
|
|
this.LocalData.areaName = this.areaList.name
|
|
|
|
this.LocalData.provinceCode = this.formData.province
|
|
this.LocalData.cityCode = this.formData.city
|
|
this.LocalData.areaCode = this.formData.district
|
|
if(this.formData.baseImage==""){
|
|
this.imgList=[]
|
|
}else{
|
|
this.imgList[0]=this.formData.baseImage
|
|
}
|
|
|
|
} finally {}
|
|
},
|
|
|
|
/** 提交按钮 */
|
|
async submitForm() {
|
|
// 校验主表
|
|
try {
|
|
const that = this
|
|
await this.$refs['formRef'].validate()
|
|
const data = this.formData
|
|
await BaseApi.updateBase(data)
|
|
await this.$store.dispatch('changeBaseName',that.formData.baseName)
|
|
await this.$store.dispatch('changeBaseLeader',that.formData.baseLeader)
|
|
uni.showToast({
|
|
title: `保存成功`,
|
|
icon: 'success',
|
|
duration: 2000,
|
|
complete: function() {
|
|
uni.redirectTo({
|
|
url: '/pages/mine/index'
|
|
});
|
|
}
|
|
})
|
|
} catch (err) {
|
|
console.log("验证未通过")
|
|
} finally {}
|
|
},
|
|
|
|
// 跳转基地列表
|
|
goBase() {
|
|
uni.redirectTo({
|
|
url: '/sunPages/mine/base/baseList'
|
|
});
|
|
},
|
|
|
|
// 获取所属企业
|
|
async getCompany() {
|
|
//企业种类 数据字典查询
|
|
try {
|
|
const res = await customApi.getCompanyAll()
|
|
let newData = res.data
|
|
this.CompanyList = newData
|
|
this.CompanyPickerList = newData.map(item => {
|
|
return item.companyName
|
|
})
|
|
} finally {}
|
|
},
|
|
|
|
// 选择所属企业
|
|
CompanyChange(e) {
|
|
this.CurrentCompany = e.detail.value
|
|
this.formData.companyId = this.CompanyList[this.CurrentCompany].companyId
|
|
},
|
|
|
|
//配送地址
|
|
startOpen() {
|
|
this.startVisible = true
|
|
},
|
|
startConfirm(val) {
|
|
this.LocalData = val
|
|
this.startVisible = false
|
|
this.formData.startRegion = this.LocalData.name
|
|
this.formData.province = this.LocalData.provinceCode
|
|
this.formData.city = this.LocalData.cityCode
|
|
this.formData.district = this.LocalData.areaCode
|
|
},
|
|
startCancel() {
|
|
this.startVisible = false
|
|
},
|
|
|
|
ceshiUploadSuccess(res) {
|
|
//上传成功
|
|
var _res = JSON.parse(res.data);
|
|
console.log('_res', _res);
|
|
if (_res.code == 0) {
|
|
this.imgList.push(_res.data);
|
|
this.formData.baseImage = _res.data;
|
|
}
|
|
},
|
|
ceshiImgDelete(e, num) {
|
|
this.imgList=[]
|
|
this.formData.baseImage=""
|
|
console.log('ceshiImgDelete', e);
|
|
},
|
|
ceshiUploadFail(err) {
|
|
//上传失败
|
|
console.log('err', err);
|
|
},
|
|
|
|
// 格式化小数两位
|
|
handlerInput(event, index) {
|
|
this.$nextTick(() => {
|
|
const num = parseFloat(event.target.value).toFixed(2)
|
|
if (isNaN(num)) {
|
|
this.formData.productLoss = undefined
|
|
} else {
|
|
this.formData.productLoss = num
|
|
}
|
|
this.$forceUpdate()
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
</style> |