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
382 lines
10 KiB
Vue
<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> |