123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663 |
- <template>
- <view>
- <view class="warpbox">
- <view class="fllow_form">
- <view class="label key">{{i18n['工单编号']}}<span>*</span></view>
- <view class="form_right">
- <view :class="workorder_number ? 'valueActive' : '' " class="righttext">
- {{workorder_number ?workorder_number : ''}}</view>
- </view>
- </view>
- <view class="fllow_form">
- <view class="label key">{{i18n['工单标题']}}<span>*</span></view>
- <view class="form_right">
- <input type="text" :class="title ? 'valueActive' : '' " class="righttext" v-model="title"
- :placeholder="i18n['请填写工单标题']" />
- </view>
- </view>
- <view class="inp_warp">
- <view class="inp_title key">关联设备<span>*</span></view>
- <view class="add_in" @click="seProduct">
- <view class="iconfont icon-jiahaocu"></view>
- 添加设备
- </view>
- </view>
- <view class="prolist" v-if="productList.length != 0">
- <view class="probox">
- <view class="proli" v-for="(item,index) in productList" :key="index">
- <view class="iconfont icon-jian" @click="delProduct(index)"></view>
- <view class="protext" style="text-align: center;width:160rpx">{{item.name}}
- </view>
- <view class="protext">{{item.unit}}</view>
- </view>
- </view>
- </view>
- <view class="fllow_area">
- <view class="area_head key">{{i18n['情况说明']}}<span>*</span></view>
- <textarea v-model="desc" class="textself" :placeholder="i18n['情况说明']" placeholder-style="color:#999" />
- </view>
- <!-- <view class="fllow_form">
- <view class="label key">{{i18n['预约时间']}}<span>*</span></view>
- <picker @change="changeTime" mode="multiSelector" :range="dateTimeArray" :value="dateTime"
- @columnchange="changeColumn">
- <view class="form_right">
- <view :class="appointment_time ? 'valueActive' : '' " class="righttext">
- {{appointment_time ? appointment_time : i18n['预约时间']}}</view>
- <view class="iconfont icon-you"></view>
- </view>
- </picker>
- </view>
- <view class="fllow_form">
- <view class="label key">{{i18n['紧急程度']}}</view>
- <picker @change="changePriori" :range="priarr" :value="priIndex">
- <view class="form_right">
- <view :class="priarr[priIndex] ? 'valueActive' : '' " class="righttext">
- {{priarr[priIndex] ? priarr[priIndex] : i18n['紧急程度']}}</view>
- <view class="iconfont icon-you"></view>
- </view>
- </picker>
- </view> -->
- <view class="inp_warp" style="margin-top:0;">
- <view class="inp_title key">{{i18n['附件']}}<span>*</span></view>
- <view class="form_right" @click="uploadFiles">
- <view class="righttext">{{i18n['上传图片']}}</view>
- <view class="iconfont icon-arrows_right"></view>
- </view>
- </view>
-
- <view class="imglist" v-if="imgList.length != 0">
- <view class="imgbox" v-for="(item,index) in imgList" :key="index">
- <image src="/static/img/close.png" class="delimg" @click="delImg(index)" ></image>
- <image :src="item.url" class="selfimg" @click.stop="toPrevie(index)"></image>
- </view>
- </view>
- <view class="fllow_form">
- <view class="label key">报修人<span>*</span></view>
- <view class="form_right">
- <input type="text" :class="linkman ? 'valueActive' : '' " class="righttext" v-model="linkman"
- :placeholder="i18n['请填写联系人']" />
- </view>
- </view>
- <view class="fllow_form" style="border-bottom:0;">
- <view class="label key">{{i18n['手机号']}}<span>*</span></view>
- <view class="form_right">
- <input type="text" :class="linkfun ? 'valueActive' : '' " class="righttext" v-model="linkfun"
- :placeholder="i18n['手机号']" />
- </view>
- </view>
- <view class="inp_warp" style="margin-top:0;">
- <view class="inp_title key">报修位置<span>*</span></view>
- <view class="form_right" @click="openmap">
- <view class="righttext">{{address}}</view>
- <view class="iconfont icon-arrows_right"></view>
- </view>
- </view>
- </view>
- <view class="button" @click="$noMultipleClicks(submitWorkOrder)">{{i18n['提交']}}</view>
- <!-- 选择产品 -->
- <select-work-product ref="workProduct" :showProduct="showProduct" @close="closePop"
- @selectList="selectProduct"></select-work-product>
- </view>
- </template>
- <script>
- import {
- netWorkOrderNumber,
- netAddWorkorder,
- uploadUrl
- } from '@/api/api.js'
- import selectWorkProduct from '@/components/selectWorkProduct/index.vue'
- import {
- dateTimePicker,
- getMonthDay
- } from '@/util/dateTimePicker.js'
- import {
- BASE_URL,
- SIGN_NO
- } from '@/api/http.js'
- export default {
- components: {
- selectWorkProduct
- },
- data() {
- return {
- noClick: true, //防止 重复点击
- workorder_number: '', //工单编号 自动生成
- title: '', //工单标题
- linkman: '', //联系人
- linkfun: '', //联系人手机号
- customer_product_id: '', //客户产品id 1,2,3,4
- desc: '', //情况说明
- files: '', //附件列表
- owner_staff_id: '', //指派员工
- address:'请选择位置',
- latitude:'',
- longitude:'',
- addr_name:'',
- imgList: [], //附件
- appointment_time: '', //预约时间
- priarr: [], //紧急情况
- priIndex: 0,
- showProduct: false,
- productList: [],
- dateTimeArray: [],
- dateArr: [],
- dateTime: [],
- }
- },
- computed: {
- i18n() {
- return this.$t("server")
- }
- },
- onLoad(options) {
- this.priarr = this.i18n['priarr']
- //获取工单编号
- this.getNumber()
- this.initTime()
- },
- onShow() {
- uni.setNavigationBarTitle({
- title: this.i18n['提交服务']
- })
-
- },
- onUnload() {
- },
- methods: {
- openmap(){
- let self=this;
- uni.chooseLocation({
- success: function (res) {
- self.addr_name=res.name;
- self.address=res.address;
- self.latitude=res.latitude;
- self.longitude=res.longitude;
- console.log('位置名称:' + res.name);
- console.log('详细地址:' + res.address);
- console.log('纬度:' + res.latitude);
- console.log('经度:' + res.longitude);
- }
- });
- },
- withData(param) {
- return param < 10 ? '0' + param : '' + param;
- },
- initTime() {
- let date = new Date()
- let endYear = date.getFullYear()
- let mont = this.withData(date.getMonth() + 1)
- let day = this.withData(date.getDate())
- let hour = this.withData(date.getHours())
- let minu = this.withData(date.getMinutes())
- let seco = this.withData(date.getSeconds())
- // 获取完整的年月日 时分秒,以及默认显示的数组
- let obj = dateTimePicker()
- // 精确到分的处理,将数组的秒去掉
- let lastArray = obj.dateTimeArray.pop();
- let lastTime = obj.dateTime.pop();
- let lastDate = obj.dateArray.pop()
- this.dateTimeArray = obj.dateTimeArray
- this.dateArr = obj.dateArray
- this.dateTime = obj.dateTime
- },
- changeColumn(e) {
- let index = e.detail.column
- let value = e.detail.value
- if (index == 1) {
- let month = this.dateArr[index][value]
- let date = new Date();
- let endYear = date.getFullYear();
- let str = endYear + '-' + month + '-' + '01' + ' ' + '00' + ':' + '00' + ':' + '00'
- let obj = dateTimePicker()
- // 精确到分的处理,将数组的秒去掉
- let lastArray = obj.dateTimeArray.pop();
- let lastTime = obj.dateTime.pop();
- let lastDate = obj.dateArray.pop()
- this.dateTimeArray = obj.dateTimeArray
- this.dateArr = obj.dateArray
- this.dateTime = obj.dateTime
- }
- },
- //下次联系时间
- changeTime(e) {
- let arr = e.detail.value
- if (arr.includes(-1)) {
- uni.showToast({
- title: '请选择正确的时间',
- icon: 'none'
- })
- return
- }
- let str = this.handleTime(arr)
- this.appointment_time = str
- },
- handleTime(arr) {
- let year = this.dateArr[0][arr[0]]
- let month = this.dateArr[1][arr[1]]
- let day = this.dateArr[2][arr[2]]
- let hour = this.dateArr[3][arr[3]]
- let minu = this.dateArr[4][arr[4]]
- let str = year + '-' + month + '-' + day + ' ' + hour + ':' + minu
- return str
- },
- getNumber() {
- netWorkOrderNumber().then(res => {
- this.workorder_number = res.data.number
- })
- },
- //获取 客户 地址
- getCustomerInfo() {
- netCustomerAddress({
- customer_id: this.customerObj.id
- }).then(res => {
- this.address = res.data.address
- this.address_detail = res.data.address_detail
- this.lat = res.data.lat
- this.lng = res.data.lng
- })
- },
- //去选择客户 地址
- chooseAddress() {
- uni.setClipboardData({
- data: this.address + this.address_detail,
- success: (res) => {
- if (this.address_detail) {
- uni.showToast({
- title: '详细地址已复制,请粘贴搜索',
- icon: 'none'
- })
- } else {
- uni.showToast({
- title: '正在打开地图',
- icon: 'none'
- })
- }
- setTimeout(() => {
- uni.chooseLocation({
- success: res => {
- console.log(res, '地址选择成功')
- this.lat = res.latitude
- this.lng = res.longitude
- this.address = res.address
- this.address_detail = res.name
- },
- fail: err => {
- if (err.errMsg == 'chooseLocation:fail auth deny') {
- uni.showToast({
- title: '请允许使用位置信息',
- icon: 'none'
- })
- }
- }
- })
- }, 2000)
- }
- })
- },
- //选择 产品
- seProduct() {
- this.showProduct = true
- this.$refs.workProduct.init()
- },
- closePop() {
- this.showProduct = false
- },
- selectProduct(arr) {
- this.showProduct = false
- let data = arr.concat(this.productList)
- this.productList = this.deWeight(data)
- },
- // 去重
- deWeight(arr) {
- for (var i = 0; i < arr.length - 1; i++) {
- for (var j = i + 1; j < arr.length; j++) {
- if (arr[i].id == arr[j].id) {
- arr.splice(j, 1);
- j--;
- }
- }
- }
- return arr;
- },
- delProduct(index) {
- this.productList.splice(index, 1)
- },
- //紧急程度
- changePriori(e) {
- this.priIndex = e.detail.value
- },
- //上传图片
- uploadFiles() {
- uni.chooseImage({
- count: 9,
- sizeType:['compressed'],
- success: (res) => {
- let file = res.tempFilePaths
- file.forEach(ele => {
- this.toUpload(ele)
- })
- }
- })
- },
- toUpload(file) {
- uni.uploadFile({
- url: uploadUrl,
- name: 'file',
- header: {
- 'token': uni.getStorageSync('token'),
- 'sign-no': SIGN_NO
- },
- filePath: file,
- success: (res) => {
- let data = JSON.parse(res.data)
- if (data.code == 1) {
- this.imgList.push(data.data)
- } else {
- uni.showToast({
- title: '上传失败',
- icon: 'none'
- })
- }
- },
- fail: (err) => {
- console.log(err)
- }
- })
- },
- delImg(index) {
- this.imgList.splice(index, 1)
- },
- //预览图片
- toPrevie(index) {
- let arr = []
- this.imgList.forEach(ele=>{
- arr.push(ele.url)
- })
- uni.previewImage({
- current:index,
- urls:arr
- })
- },
- //去选择 指派员工
- toSelectStaff() {
- uni.navigateTo({
- url: '/pages/template/relation_staff'
- })
- },
- //提交
- submitWorkOrder() {
- let {
- workorder_number, //工单编号 自动生成
- title, //工单标题
- desc, //情况说明
- imgList,
- appointment_time, //预约时间
- priarr,
- priIndex,
- productList,
- linkman,
- linkfun
- } = this
- if (!title) {
- uni.showToast({
- title: '请填写工单标题',
- icon: 'none'
- })
- return
- }
- if (productList.length == 0) {
- uni.showToast({
- title: '请选择设备',
- icon: 'none'
- })
- return
- }
- if (!desc) {
- uni.showToast({
- title: '请填写情况说明',
- icon: 'none'
- })
- return
- }
- // if (!appointment_time) {
- // uni.showToast({
- // title: '请选择预约时间',
- // icon: 'none'
- // })
- // return
- // }
- if (imgList.length == 0) {
- uni.showToast({
- title: '请上传附件',
- icon: 'none'
- })
- return
- }
- if (!linkman) {
- uni.showToast({
- title: '请填写报修人',
- icon: 'none'
- })
- return
- }
- if (!linkfun) {
- uni.showToast({
- title: '请填写联系人手机号',
- icon: 'none'
- })
- return
- }
- //图片
- let arr = []
- imgList.forEach(ele => {
- arr.push(ele.id)
- })
- //产品
- let proarr = []
- productList.forEach((ele) => {
- proarr.push(ele.id)
- })
- let params = {
- title,
- workorder_number,
- desc,
- file_ids: arr.join(','),
- customer_product_id: proarr.join(','), //无用字段
- priority: priarr[priIndex],
- appointment_time,
- linkman,
- linkfun,
- lng:this.longitude,
- lat:this.latitude,
- address:this.addr_name,
- address_detail:this.address,
- }
- netAddWorkorder(params).then(res => {
- uni.showToast({
- title: res.msg,
- icon: 'none'
- })
- setTimeout(() => {
- uni.navigateBack({
- delta: 1
- })
- }, 2000)
- })
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .warpbox {
- width: 690rpx;
- margin: 30rpx auto;
- border-radius: 20rpx;
- background: #fff;
- }
- .inp_warp {
- padding: 24rpx;
- display: flex;
- justify-content: space-between;
- align-items: center;
- border-bottom: 1rpx solid #EDEDED;
- .inp_title {
- font-size: 26rpx;
- color: #000;
- text {
- color: #F00;
- }
- }
- .add_in {
- display: flex;
- justify-content: flex-end;
- align-items: center;
- font-size: 26rpx;
- color: #FF8A00;
- .icon-jiahaocu {
- font-size: 28rpx;
- color: #FF8A00;
- margin-right: 5rpx;
- }
- }
- }
- .fllow_form {
- display: flex;
- justify-content: space-between;
- border-bottom: 1rpx solid #EDEDED;
- padding: 24rpx;
- .label {
- font-size: 24rpx;
- color:#666;
- text {
- color: red;
- }
- }
- }
- .form_right {
- display: flex;
- justify-content: flex-end;
- align-items: center;
- color: #999;
- min-width: 450rpx;
- text-align: right;
- .righttext {
- font-size: 24rpx;
- }
- }
- .prolist {
- background-color: #fff;
- border-bottom: 1rpx solid #EDEDED;
- padding: 24rpx;
- .ptotitle {
- font-size: 24rpx;
- color: #333;
- }
- .probox {
- padding: 0 24rpx;
- .proli {
- padding: 24rpx 0;
- border-bottom: 1rpx dashed #f5f5f5;
- display: flex;
- justify-content: space-between;
- align-items: center;
- &:last-child {
- border-bottom: 0;
- }
- .icon-jian {
- font-size: 42rpx;
- color: #ff7800;
- }
- .protext {
- font-size: 24rpx;
- color: #333;
- margin-bottom: 15rpx;
- }
- }
- }
- }
- .fllow_area {
- background-color: #fff;
- padding: 24rpx;
- border-bottom: 1rpx solid #EAEAEA;
- .area_head {
- font-size: 24rpx;
- margin-bottom:15rpx;
- text {
- color: #f00;
- }
- }
- .textself {
- width: 600rpx;
- height: 230rpx;
- background: rgba(202, 202, 202, 0.2);
- box-sizing: border-box;
- padding: 24rpx;
- font-size: 24rpx;
- margin: 0 auto;
- border-radius: 20rpx;
- }
- }
- .imglist {
- padding: 24rpx 34rpx;
- background: #fff;
- border-bottom: 1rpx solid #EAEAEA;
- display: flex;
- justify-content: flex-start;
- align-items: center;
- flex-wrap: wrap;
- .imgbox {
- width: 160rpx;
- height: 160rpx;
- margin-right: 14rpx;
- position: relative;
- margin-bottom: 24rpx;
- border: 1rpx solid #EAEAEA;
- &:nth-child(4n) {
- margin-right: 0;
- }
- .delimg {
- width: 32rpx;
- height: 32rpx;
- border-radius: 50%;
- position: absolute;
- right: -16rpx;
- top: -16rpx;
- background: rgba(0, 0, 0, 0.5);
- z-index: 2;
- }
- .selfimg {
- width: 160rpx;
- height: 160rpx;
- }
- }
- }
- </style>
|