You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

382 lines
10 KiB
Vue

4 weeks ago
<template>
<view class="box-container">
<u-navbar leftIconSize="25px" title="工单填写" :titleStyle="{fontWeight:700}" height="70px" :autoBack="true">
</u-navbar>
<view class="entry-info">
<u-form labelPosition="top" labelWidth="120" :model="sizeForm" :rules="rules" ref="ruleFormRef">
<u-form-item label="关联客户" :required="true">
<view v-show="custIdLabel">{{custIdLabel}}</view>
<u-icon name="close" v-show="custIdLabel" @click="clearCustId" size="15" color="#BFBFBF"
style="margin-right: 80rpx;margin-left: 50rpx;"></u-icon>
<view @tap="custIdShow = true">请选择</view>
</u-form-item>
<u-picker @cancel="custIdShow = false" :show="custIdShow" :columns="custIdcolumns"
keyName="optionText" @confirm="pickerConfirmCustId"></u-picker>
<u-form-item label="工单类型" :required="true">
<view v-show="issueTypeLabel">{{issueTypeLabel}}</view>
<u-icon name="close" v-show="issueTypeLabel" @click="clearIssueType" size="15" color="#BFBFBF"
style="margin-right: 80rpx;margin-left: 50rpx;"></u-icon>
<view @tap="issueTypeShow = true">请选择</view>
</u-form-item>
<u-picker @cancel="issueTypeShow = false" :show="issueTypeShow" :columns="issueTypecolumns"
keyName="optionText" @confirm="pickerConfirmIssueType"></u-picker>
<u-form-item label="工单标题" prop="title" :required="true">
<u-textarea v-model="sizeForm.title" placeholder="请输入标题" autoHeight></u-textarea>
</u-form-item>
<u-form-item label="工单内容" prop="content" :required="true">
<u-textarea v-model="sizeForm.content" placeholder="请输入内容" count :maxlength="500"></u-textarea>
</u-form-item>
<u-form-item label="附件" prop="ossFileDTOList">
<imgUpload :ossFileDTOList.sync="sizeForm.ossFileDTOList" v-model="sizeForm.ossFileDTOList" />
</u-form-item>
<u-form-item label="优先级" :required="true">
<view v-show="priorityLabel">{{priorityLabel}}</view>
<u-icon name="close" v-show="priorityLabel" @click="clearPriority" size="15" color="#BFBFBF"
style="margin-right: 80rpx;margin-left: 50rpx;"></u-icon>
<view @tap="priorityShow = true">请选择</view>
</u-form-item>
<u-picker @cancel="priorityShow = false" :show="priorityShow" :columns="prioritycolumns"
keyName="optionText" @confirm="pickerConfirmPriority"></u-picker>
<u-form-item label="是否为问题件" :required="true">
<view v-show="isIssueLabel">{{isIssueLabel}}</view>
<u-icon name="close" v-show="isIssueLabel" @click="clearIsIssue" size="15" color="#BFBFBF"
style="margin-right: 80rpx;margin-left: 50rpx;"></u-icon>
<view @tap="isIssueShow = true">请选择</view>
</u-form-item>
<view style="font-size:10px ;color: #C1C1C1;">
说明拦截为问题件后该订单不能做任何操作请谨慎操作
</view>
<u-picker @cancel="isIssueShow = false" :show="isIssueShow" :columns="isIssuecolumns"
keyName="optionText" @confirm="pickerConfirmIsIssue"></u-picker>
<u-form-item label="关注人" prop="followDTOList" :required="true">
<view style="display: flex; flex-wrap: wrap;width: 100%;">
<view class="avatar" @click="getUserAvatar(1)">
<u-icon name="plus" color="#1A4F94" size="20"></u-icon>
</view>
<view v-for="(item,index) in sizeForm.followDTOList" :key="index" class="userAvatar">
<image src="@/static/images/common/userAvatar.png" class="img"></image>
<view style="margin:0 20rpx;">
{{item.optionText}}
</view>
<u-icon name="close" @click="deleteAvatar('1', index)" color="#C5C5C5" size="15"></u-icon>
</view>
</view>
</u-form-item>
<u-form-item label="处理人" prop="handleIdList" :required="true">
<view style="display: flex; flex-wrap: wrap;width: 100%;">
<view class="avatar" @click="getUserAvatar(2)">
<u-icon name="plus" color="#1A4F94" size="20"></u-icon>
</view>
<view v-for="(item,index) in sizeForm.handleIdList" :key="index" class="userAvatar">
<image src="@/static/images/common/userAvatar.png" class="img"></image>
<view style="margin:0 20rpx;">
{{item.optionText}}
</view>
<u-icon name="close" @click="deleteAvatar('1', index)" color="#C5C5C5" size="15"></u-icon>
</view>
</view>
</u-form-item>
</u-form>
<button type="primary" class="btn" @click="submitData"></button>
</view>
<u-toast ref="uToast"></u-toast>
</view>
</template>
<script>
import store from '@/store/index'
import Api from '@/api/api.js'
import imgUpload from '@/components/image-upload.vue'
export default {
components: {
imgUpload,
},
onLoad(op) {
if (op.orderNo) {
this.sizeForm.busId = op.orderNo
uni.$on('newPages', (e) => {
if (e.type == "1") {
this.sizeForm.followDTOList = e.checkboxList.filter(item => e.followDTOList.includes(item
.optionValue));
this.sizeForm.followDTOList.map(item=>{
item.followerId = item.optionValue
})
} else {
this.sizeForm.handleIdList = e.checkboxList.filter(item => e.followDTOList == item
.optionValue);
}
})
}
},
onUnload() {
uni.$off('newPages')
},
onShow() {
Api.storge.queryByDictCode({
"dictCode": "work_issue_type",
"pageNum": 1,
"pageSize": 500
}).then(res => {
if (res?.data?.records) {
this.issueTypecolumns = [res.data.records]
}
})
Api.storge.queryByDictCode({
"dictCode": "work_issue_priority",
"pageNum": 1,
"pageSize": 500
}).then(res => {
if (res?.data?.records) {
this.prioritycolumns = [res.data.records]
}
})
Api.storge.queryByDictCode({
"dictCode": "yes_or_no",
"pageNum": 1,
"pageSize": 500
}).then(res => {
if (res?.data?.records) {
this.isIssuecolumns = [res.data.records]
this.sizeForm.isIssue = "1"
}
})
Api.storge.queryByDictCode({
"dictCode": "aaf_cust",
"pageNum": 1,
"pageSize": 500
}).then(res => {
if (res?.data?.records) {
this.custIdcolumns = [res.data.records]
}
})
},
data() {
return {
sizeForm: {
ossFileDTOList: [],
busId: "",
issueType: "",
content: "",
title: "",
isIssue: "",
priority: "",
followDTOList: [],
handleIdList:[]
},
rules: {
content: {
type: "string",
required: true,
message: '请输入工单内容',
trigger: ['blur', 'change']
},
title: {
type: "string",
required: true,
message: '请输入工单标题',
trigger: ['blur', 'change']
},
followDTOList: {
type: "array",
required: true,
message: '请添加关注人',
trigger: ['blur', 'change']
},
handleIdList: {
type: "array",
required: true,
message: '请添加处理人',
trigger: ['blur', 'change']
},
},
issueTypeShow: false,
issueTypeLabel: "",
issueTypecolumns: [
[]
],
priorityShow: false,
priorityLabel: "",
prioritycolumns: [
[]
],
isIssueShow: false,
isIssueLabel: "是",
isIssuecolumns: [
[]
],
custIdShow: false,
custIdLabel: "",
custIdcolumns: [
[]
],
}
},
methods: {
getUserAvatar(type) {
if (type == "1") {
uni.navigateTo({
url: `/pages/workOrder/userAvatarMul?data=${JSON.stringify(this.sizeForm.followDTOList)}`
})
}
if (type == "2") {
uni.navigateTo({
url: `/pages/workOrder/userAvatarSin?data=${JSON.stringify(this.sizeForm.handleIdList)}`
})
}
},
deleteAvatar(type, index) {
if (type == "1") {
this.sizeForm.followDTOList.splice(index, 1);
}
if (type == "2") {
this.sizeForm.handlerIdList.splice(index, 1);
}
},
pickerConfirmIssueType(val) {
this.sizeForm.issueType = val.value[0].optionValue
this.issueTypeLabel = val.value[0].optionText
this.issueTypeShow = false
},
clearIssueType() {
this.sizeForm.issueType = ""
this.issueTypeLabel = ""
},
pickerConfirmPriority(val) {
this.sizeForm.priority = val.value[0].optionValue
this.priorityLabel = val.value[0].optionText
this.priorityShow = false
},
clearPriority() {
this.sizeForm.priority = ""
this.priorityLabel = ""
},
pickerConfirmIsIssue(val) {
this.sizeForm.isIssue = val.value[0].optionValue
this.isIssueLabel = val.value[0].optionText
this.isIssueShow = false
},
clearIsIssue() {
this.sizeForm.isIssue = ""
this.isIssueLabel = ""
},
pickerConfirmCustId(val) {
this.sizeForm.custId = val.value[0].optionValue
this.custIdLabel = val.value[0].optionText
this.custIdShow = false
},
clearCustId() {
this.sizeForm.custId = ""
this.custIdLabel = ""
},
submitData() {
if (!this.sizeForm.custId) {
this.$refs.uToast.show({
type: 'warning',
message: "请选择关联客户",
})
return
}
if (!this.sizeForm.issueType) {
this.$refs.uToast.show({
type: 'warning',
message: "请选择工单类型",
})
return
}
if (!this.sizeForm.priority) {
this.$refs.uToast.show({
type: 'warning',
message: "请选择优先级",
})
return
}
if (!this.sizeForm.isIssue) {
this.$refs.uToast.show({
type: 'warning',
message: "请选择是否为问题件",
})
return
}
this.$refs.ruleFormRef.validate().then(valid => {
this.sizeForm.handler = this.sizeForm.handleIdList[0].optionValue
Api.storge.workIssueInsertByPage(this.sizeForm).then(res => {
this.$refs.uToast.show({
type: 'success',
message: "提交成功",
})
uni.navigateBack()
})
})
},
}
}
</script>
<style lang="scss" scoped>
.box-container {
.entry-info {
width: 85%;
margin: auto;
margin-top: 230rpx;
.btn {
border-radius: 12px;
font-size: 28rpx;
margin: 60rpx 0;
background-color: #1A4F94;
}
.avatar {
width: 80rpx;
height: 80rpx;
background-color: #E8EDF4;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.userAvatar {
padding: 0px 10px;
box-sizing: border-box;
height: 40px;
background-color: #f1f1f1;
margin-left: 20rpx;
border-radius: 63rpx;
display: flex;
align-items: center;
font-size: 12px;
color: #595959;
.img {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
}
}
}
}
</style>