qa-prevention-xgf-app/pages/eight_assignments/cut_road/apply.vue

257 lines
11 KiB
Vue

<template>
<view class="content">
<view class="card">
<u-form labelPosition="left" :model="form" :rules="rules" ref="formRef" labelWidth="140px">
<u-form-item label="申请单位" prop="APPLY_DEPARTMENT_NAME" borderBottom required>
<u-input v-model="form.APPLY_DEPARTMENT_NAME" border="none" readonly/>
</u-form-item>
<u-form-item label="申请人" prop="APPLY_USER_NAME" borderBottom required>
<u-input v-model="form.APPLY_USER_NAME" border="none" readonly/>
</u-form-item>
<u-form-item label="作业分公司" prop="CORP_NAME" borderBottom required>
<u-input v-model="form.CORP_NAME" border="none" readonly/>
</u-form-item>
<u-form-item label="作业开始时间" prop="WORK_START_DATE" borderBottom required
@click="fnDateTimePickerClick('WORK_START_DATE')">
<u-input v-model="form.WORK_START_DATE" border="none" readonly/>
<u-icon name="arrow-right"></u-icon>
</u-form-item>
<u-form-item label="作业结束时间" prop="WORK_END_DATE" borderBottom required
@click="fnDateTimePickerClick('WORK_END_DATE')">
<u-input v-model="form.WORK_END_DATE" border="none" readonly/>
<u-icon name="arrow-right"></u-icon>
</u-form-item>
<u-form-item label="地点坐标" borderBottom required>
<u-button type="primary" size="small" text="定位" :customStyle="{width:'100upx',margin:0}"
@click="fnLocation"/>
</u-form-item>
<u-form-item label="经度" prop="WORK_LONGITUDE" borderBottom required>
<u-input v-model="form.WORK_LONGITUDE" border="none" readonly/>
</u-form-item>
<u-form-item label="纬度" prop="WORK_LATITUDE" borderBottom required>
<u-input v-model="form.WORK_LATITUDE" border="none" readonly/>
</u-form-item>
<u-form-item label="涉及相关单位(部门)" prop="OTHER_DEPT" borderBottom required labelPosition="top" labelWidth="auto">
<u-textarea v-model="form.OTHER_DEPT" border="none" autoHeight/>
</u-form-item>
<u-form-item label="断路原因" prop="WORK_REASON" borderBottom required labelPosition="top" labelWidth="auto">
<u-textarea v-model="form.WORK_REASON" border="none" autoHeight/>
</u-form-item>
<u-form-item label="断路地段示意图相关说明" prop="WORK_CONTENT" borderBottom required labelPosition="top" labelWidth="auto">
<u-textarea v-model="form.WORK_CONTENT" border="none" autoHeight/>
</u-form-item>
<u-form-item label="断路地段示意图" prop="CONTENT_IMG_PATH" borderBottom required labelPosition="top" labelWidth="auto">
<u-upload
class="mt-10"
:fileList="form.CONTENT_IMG_PATH"
@afterRead="fnAfterRead($event,'CONTENT_IMG_PATH')"
@delete="fnDeletePic($event,'CONTENT_IMG_PATH')"
multiple
:maxCount="1"
></u-upload>
</u-form-item>
<u-form-item label="关联的其他特殊作业及安全作业票编号" prop="SPECIAL_WORK" borderBottom required
labelPosition="top" labelWidth="auto">
<u-button type="primary" size="mini" text="选择其它"
:customStyle="{position: 'absolute',top: '-46upx',right: '20upx',width: '150upx'}"
@click="otherAssignmentsShow = true"/>
<u-textarea v-model="form.SPECIAL_WORK" border="none" autoHeight maxlength="-1"/>
</u-form-item>
<u-form-item label="风险辨识结果" prop="RISK_IDENTIFICATION" borderBottom required labelPosition="top"
labelWidth="auto">
<u-button type="primary" size="mini" text="选择其它"
:customStyle="{position: 'absolute',top: '-46upx',right: '20upx',width: '150upx'}"
@click="otherIdentificationShow = true"/>
<u-textarea v-model="form.RISK_IDENTIFICATION" border="none" autoHeight maxlength="-1"/>
</u-form-item>
<u-form-item label="申请人签字" prop="SIGN" borderBottom required labelPosition="top" labelWidth="auto">
<view style="flex: 1">
<view>
<u-button type="primary" size="mini" text="签字"
:customStyle="{position: 'absolute',top: '-46upx',right: '20upx',width: '100upx'}"
@click="signVisible = true"/>
</view>
<view v-if="form.SIGN">
<u-image width="400rpx" height="200rpx" :src="form.SIGN"/>
</view>
</view>
</u-form-item>
</u-form>
<view class="mt-10">
<u-button type="primary" text="下一步" @click="$u.debounce(fnSubmit, 1000,true)"/>
</view>
</view>
<u-datetime-picker :show="dateTimePicker.show" v-model="dateTimePicker.value" :mode="dateTimePicker.mode"
:minDate="dateTimePicker.min" :key="dateTimePicker.type" @confirm="fnDateTimePickerConfirm"
@cancel="fnDateTimePickerCancel"/>
<other-select :visible.sync="otherAssignmentsShow" v-model="form.SPECIAL_WORK" type="assignments"/>
<other-select :visible.sync="otherIdentificationShow" v-model="form.RISK_IDENTIFICATION" type="identification"/>
<sign :signShow.sync="signVisible" @confirm="fnSign"/>
</view>
</template>
<script>
import OtherSelect from '@/components/other-select/index.vue';
import Sign from '@/components/sign/sign.vue'
import {setSubmitForm} from "@/utils/submitHomeworkProcess";
export default {
components: {
OtherSelect,
Sign
},
data() {
return {
type: '',
formItems: [
{name: '申请单位', key_name: 'APPLY_DEPARTMENT_NAME', key_id: 'APPLY_DEPARTMENT_ID', type: 0},
{name: '申请人', key_name: 'APPLY_USER_NAME', key_id: 'APPLY_USER_ID', type: 0},
{name: '作业分公司', key_name: 'CORP_NAME', key_id: 'CORP_ID', type: 0},
{name: '作业开始时间', key_name: 'WORK_START_DATE', type: 0},
{name: '作业结束时间', key_name: 'WORK_END_DATE', type: 0},
{name: '经度', key_name: 'WORK_LONGITUDE', type: 0},
{name: '纬度', key_name: 'WORK_LATITUDE', type: 0},
{name: '涉及相关单位(部门)', key_name: 'OTHER_DEPT', type: 0},
{name: '断路原因', key_name: 'WORK_REASON', type: 0},
{name: '断路地段示意图相关说明', key_name: 'WORK_CONTENT', type: 0},
{name: '断路地段示意图', key_name: 'CONTENT_IMG_PATH', type: 1},
{name: '关联的其他特殊作业及安全作业票编号', key_name: 'SPECIAL_WORK', type: 0},
{name: '风险辨识结果', key_name: 'RISK_IDENTIFICATION', type: 0},
{name: '申请人签字', key_name: 'SIGN', type: 5},
],
form: {
APPLY_DEPARTMENT_ID: this.$store.getters.getUserInfo.DEPARTMENT_ID,
APPLY_DEPARTMENT_NAME: this.$store.getters.getUserInfo.DEPARTMENT_NAME,
APPLY_USER_ID: this.$store.getters.getUserInfo.USER_ID,
APPLY_USER_NAME: this.$store.getters.getUserInfo.NAME,
CORP_ID: '',
CORP_NAME: '',
WORK_START_DATE: '',
WORK_END_DATE: '',
WORK_LONGITUDE: '1',
WORK_LATITUDE: '2',
OTHER_DEPT: '',
WORK_REASON: '',
WORK_CONTENT: '',
CONTENT_IMG_PATH: [],
SPECIAL_WORK: '',
RISK_IDENTIFICATION: '',
SIGN: '',
},
rules: {
APPLY_DEPARTMENT_ID: [{type: 'string', required: true, message: '请选择申请单位', trigger: ['blur', 'change']}],
APPLY_USER_NAME: [{type: 'string', required: true, message: '请选择申请人', trigger: ['blur', 'change']}],
CORP_NAME: [{type: 'string', required: true, message: '请选择作业分公司', trigger: ['blur', 'change']}],
WORK_START_DATE: [{type: 'string', required: true, message: '请选择作业开始时间', trigger: ['blur', 'change']}],
WORK_END_DATE: [{type: 'string', required: true, message: '请选择作业结束时间', trigger: ['blur', 'change']}],
WORK_LONGITUDE: [{type: 'string', required: true, message: '请输入经度', trigger: ['blur', 'change']}],
WORK_LATITUDE: [{type: 'string', required: true, message: '请输入纬度', trigger: ['blur', 'change']}],
OTHER_DEPT: [{type: 'string', required: true, message: '请输入涉及相关单位(部门)', trigger: ['blur', 'change']}],
WORK_REASON: [{type: 'string', required: true, message: '请输入断路原因', trigger: ['blur', 'change']}],
WORK_CONTENT: [{type: 'string', required: true, message: '请输入断路地段示意图相关说明', trigger: ['blur', 'change']}],
CONTENT_IMG_PATH: [{
type: 'array',
required: true,
message: '请上传断路地段示意图',
trigger: ['blur', 'change']
}],
SPECIAL_WORK: [{
type: 'string',
required: true,
message: '请输入关联的其他特殊作业及安全作业票编号',
trigger: ['blur', 'change']
}],
RISK_IDENTIFICATION: [{
type: 'string',
required: true,
message: '请输入风险辨识结果',
trigger: ['blur', 'change']
}],
SIGN: [{
type: 'string',
required: true,
message: '请签字',
trigger: ['blur', 'change']
}],
},
dateTimePicker: {
show: false,
value: Number(new Date()),
min: new Date().getTime(),
mode: 'datetime',
type: 'datetime-picker'
},
otherAssignmentsShow: false,
otherIdentificationShow: false,
signVisible: false,
}
},
onLoad(options) {
this.form.CORP_ID = options.CORPINFO_ID
this.form.CORP_NAME = options.CORP_NAME
this.type = options.type
},
methods: {
fnDateTimePickerClick(event) {
this.dateTimePicker.type = event
this.dateTimePicker.value = Number(new Date(this.form[event])) || Number(new Date())
this.dateTimePicker.show = true
},
fnDateTimePickerConfirm(event) {
this.form[this.dateTimePicker.type] = uni.$u.timeFormat(event.value, 'yyyy-mm-dd hh:MM')
this.fnDateTimePickerCancel()
},
fnDateTimePickerCancel() {
this.dateTimePicker.show = false
},
fnLocation() {
uni.navigateTo({
url: '/pages/map/index',
events: {
acceptLocationData: (event) => {
this.form.WORK_LONGITUDE = event.data.longitue;
this.form.WORK_LATITUDE = event.data.latitude;
}
},
})
},
fnAfterRead(event, key) {
this.form[key].push(...event.file)
},
fnDeletePic(event, key) {
uni.showModal({
title: '提示',
content: '确定删除该图片吗?',
success: (res) => {
if (res.confirm) {
this.form[key].splice(event.index, 1)
}
}
})
},
fnSign(event) {
this.form.SIGN = event.filePath
},
async fnSubmit() {
try {
await this.$refs.formRef.validate()
try {
await setSubmitForm({
form: this.form,
formItems: this.formItems,
TYPE: this.type,
CORP_ID: this.form.CORP_ID
})
} catch {
}
} catch {
uni.$u.toast('请补全必填项')
}
}
}
}
</script>
<style scoped lang="scss">
</style>