123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279 |
- <template>
- <view class="back-body">
- <view class="back-content">
- <view class="wrap">
- <u-upload :custom-btn="true" :multiple="false" ref="uUpload" :action="action">
- <view v-if="lists.length<5" slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
- <u-icon name="plus" size="60" color="#c0c4cc"></u-icon>
- <view>选择图片</view>
- </view>
- </u-upload>
- </view>
- <u-form class="form-content" :model="form" ref="uForm" label-width="180">
- <u-form-item required label="门店" prop="storeName">
- <u-input @click="chooseStore" input-align="right" v-model="form.storeName" disabled placeholder="请选择门店" />
- <u-icon @click="chooseStore" name="icon-xian-11" custom-prefix="xd-icon" size="30" color="#888888"></u-icon>
- </u-form-item>
- <u-form-item label="考评指标" prop="clsName">
- <u-input @click="chooseClsName" input-align="right" v-model="form.clsName" disabled placeholder="请选择考评指标" />
- <u-icon @click="chooseClsName" name="icon-xian-11" custom-prefix="xd-icon" size="30" color="#888888"></u-icon>
- </u-form-item>
- <u-form-item label="抄送人" prop="receiveUser">
- <u-input @click="chooseUser" input-align="right" v-model="form.receiveUser" disabled placeholder="请选择抄送人" />
- <u-icon @click="chooseUser" name="icon-xian-11" custom-prefix="xd-icon" size="30" color="#888888"></u-icon>
- </u-form-item>
- <u-form-item required label="整改到期日" prop="effectiveEndTime" >
- <u-input @click="showPicker=true" input-align="right" v-model="form.effectiveEndTime" disabled placeholder="请选择整改到期日" />
- <u-icon name="icon-xian-11" custom-prefix="xd-icon" size="30" color="#888888"></u-icon>
- </u-form-item>
- </u-form>
- <view class="remarks">
- <u-input v-model="remarks" maxlength="500" type="textarea" placeholder="请输入备注(最多500字符)..." />
- </view>
- </view>
- <u-button @click="handleSave" :loading="loading" class="save-btn" type="primary">保存</u-button>
- <!-- 时间选择器 -->
- <w-picker
- class="date-picker"
- :visible.sync="showPicker"
- mode="date"
- :current="true"
- fields="day"
- :value="form.effectiveEndTime"
- @confirm="onSelected($event,'date')"
- @cancel="showPicker=false"
- ref="date"
- ></w-picker>
- </view>
- </template>
- <script>
- import {saveBackLog} from '@/api/backLog.js'
- export default {
- components: {
- },
- data() {
- return {
- action: getApp().globalData.baseUrl + 'upload', //自行修改各自的对应的接口, // 图片上传后端地址
- showUploadList: false,
- // 如果将某个ref的组件实例赋值给data中的变量,在小程序中会因为循环引用而报错
- // 这里直接获取内部的lists变量即可
- lists: [],
- showPicker: false, // 是否显示时间弹窗
- form: {
- storeName: '', // 门店
- storeId: '', // 门店id
- clsName: '',// 考评指标
- receiveUser: '', // 抄送人
- effectiveEndTime: '' // 整改到期日
- },
- storeSelected : [], // 已选门店
- userSelected : [], // 已选用户
- evaItemSelected : null, // 已选指标
- remarks: '', // 备注
- loading: false // 保存按钮loading
- }
- },
- // 只有onReady生命周期才能调用refs操作组件
- onReady() {
- // 得到整个组件对象,内部图片列表变量为"lists"
- this.lists = this.$refs.uUpload.lists;
- },
- onLoad(option) {
- uni.$on('selKpStores',this.setStore)
- uni.$on('selKpUsers',this.setUser)
- uni.$on('selKpItem',this.setEvaItem)
- },
- onUnload() {
- uni.$off('selKpStores', this.setStore)
- uni.$off('selKpUsers', this.setUser)
- uni.$off('selKpItem', this.setEvaItem)
- },
- methods: {
- // 获取选择门店
- setStore (data) {
- this.storeSelected = data
- this.form.storeName = this.storeSelected[0].name
- this.form.storeId = this.storeSelected[0].id
- },
- // 确认日期选择
- onSelected (v) {
- let nowTime = new Date().getTime() // 当前时间戳
- let nowDate = this.$u.date(nowTime,'yyyy-mm-dd') // 当前日期
- if (nowTime > new Date(v.value).getTime() && nowDate!=v.value) {
- return this.toashMsg('所选日期小于当前日期,请重新选择!')
- }
- this.form.effectiveEndTime = v.value
- this.showPicker = false
- },
- // 选择门店
- chooseStore () {
- uni.navigateTo({
- url: `/pages/spotCheckConfigure/evaluateStore?type=${'radio'}&item=${encodeURIComponent(JSON.stringify(this.storeSelected))}`
- })
- },
- // 选择考评指标
- chooseClsName () {
- uni.navigateTo({
- url: '/pages/toDoList/chooseEvaluateItem?item='+encodeURIComponent(JSON.stringify(this.evaItemSelected))
- })
- },
- // 获取选择的指标
- setEvaItem (data) {
- console.log(data,'eeeeeeee')
- this.evaItemSelected = data
- this.form.clsName = data.name
- console.log(data.name,this.form.clsName,'222222')
- },
- // 选择抄送人
- chooseUser () {
- uni.navigateTo({
- url: `/pages/toDoList/chooseReceiveUser?type=${'checkbox'}&item=${encodeURIComponent(JSON.stringify(this.userSelected))}`
- })
- },
- // 获取选择的抄送人
- setUser (data) {
- // console.log(data,'eeeeeeee')
- this.userSelected = data
- let name = ''
- if (data.length) {
- data.map((item,index) =>{
- name = (name?(name + ',') : '') + item.name
- })
- }
- this.form.receiveUser = name
- },
- // 保存提交
- handleSave () {
- this.$refs.uForm.validate(valid => {
- if (valid) {
- if (!this.form.storeName) {
- return this.toashMsg('请选择门店!')
- } else if (!this.form.effectiveEndTime) {
- return this.toashMsg('请选择整改到期日!')
- }
- const copyUserList = []
- this.userSelected.map(item =>{
- let p = {
- userId: item.id,
- userName: item.name
- }
- copyUserList.push(p)
- })
- const backlogPhotoList = []
- this.lists.map(item =>{
- let photo = {
- photoPath:item.response&&item.response.data?item.response.data:''
- }
- backlogPhotoList.push(photo)
- })
- let params = {
- "copyUserList": copyUserList,
- "backlogPhotoList": backlogPhotoList,
- "clsNo": this.evaItemSelected ? this.evaItemSelected.assessItemId : '',
- "clsName": this.evaItemSelected ? this.evaItemSelected.name : '',
- "problemDesc": this.remarks,
- "effectiveEndTime": this.form.effectiveEndTime,
- "storeId" : this.form.storeId
- }
- // console.log(params,'ppppppppp')
- this.loading = true
- uni.showLoading({
- title: '保存中,请稍后...',
- mask: true
- })
- saveBackLog(params).then(res=>{
- this.toashMsg(res.message)
- if(res.status == 200) {
- uni.$emit('refreshBL',{msg:'页面更新'})
- uni.navigateBack()
- }
- this.loading = false
- uni.hideLoading()
- })
-
- } else {
- console.log('验证失败');
- }
- })
- }
-
- }
- }
- </script>
- <style lang="scss" scoped>
- .back-body {
- height: 100%;
- background-color: #eee;
- display: flex;
- flex-direction: column;
- .back-content {
- flex: 1;
- overflow-y: scroll;
- }
- .wrap {
- padding: 24upx;
- background-color: #fff;
- width: 100%;
- }
-
- .slot-btn {
- width: 200upx;
- height: 200upx;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- background: rgb(244, 245, 246);
- border-radius: 10upx;
- color: #999;
- view {
- margin-top: 10upx;
- }
- }
- .slot-btn__hover {
- background-color: rgb(235, 236, 238);
- }
- .paizhao {
- background-color: #fff;
- height: 340upx;
- display: flex;
- align-items: center;
- justify-content: center;
- .icon{
- width: 160upx;
- height: 160upx;
- border: 1px solid #eee;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- }
- .text-right {
- text-align: right;
- }
- .top-ad-swiper{
- background-color: #fff;
- height: 340upx;
- }
- .swiper-item-imgse{
- width: 750upx;
- height: 340upx;
- }
- .form-content{
- background-color: #fff;
- padding: 0 30upx;
- }
- .remarks{
- background-color: #fff;
- padding: 0 30upx;
- margin-top: 20upx;
- }
- .save-btn{
- width: 90%;
- margin-bottom: 20upx;
- }
- }
- </style>
|