<template>
<view class="contain-box">
<u-navbar
:title="title"
:is-back="true"
back-icon-color="#fff"
:background="background"
:border-bottom="false"
title-color="#fff"
>
</u-navbar>
<view class="form-box">
<u-form :model="form" ref="uForm" labelWidth="200" :toast="false">
<!-- 报修区域类型 -->
<u-form-item label="报修区域类型" prop="areaType" borderBottom required>
<u-input
v-model="areaTypeLabel"
disabled
disabledColor="#ffffff"
placeholder="请选择区域类型"
@click="showTypeFun"
></u-input>
<u-icon slot="right" name="arrow-right"></u-icon>
</u-form-item>
<u-select :list="listType" v-model="showType" @confirm="getShowtype">
</u-select>
<!-- 报修类型 -->
<u-form-item label="报修类型" prop="warrantyType" borderBottom required>
<u-input
v-model="warrantyLabel"
disabled
disabledColor="#ffffff"
placeholder="请选择类型"
@click="showTypeFun2"
></u-input>
<u-icon slot="right" name="arrow-right"></u-icon>
</u-form-item>
<u-select
:list="warrantyTypeList"
v-model="showType2"
@confirm="getShowtype2"
label-name="text"
value-name="value"
>
</u-select>
<u-form-item label="报修名称" prop="name" required>
<u-input v-model="form.name" placeholder="请输入名称" />
</u-form-item>
<u-form-item label="报修位置" prop="reportAdress" required>
<u-input v-model="form.reportAdress" placeholder="请输入位置" />
</u-form-item>
<u-form-item label="事件描述" prop="description" required>
<u-input
v-model="form.description"
type="textarea"
height="150"
:auto-height="true"
:border="true"
placeholder="请输入内容（最多200字）"
:maxlength="200"
/>
</u-form-item>
<u-form-item label="现场图片">
<u-upload
:max-count="9"
upload-text="最多9张"
@on-success="successUpload"
@on-change="changeUpload"
@on-error="errorUpload"
@on-remove="removeUpload"
:action="action_"
:file-list="fileList"
:max-size="5 * 1024 * 1024"
:header="header_"
>
</u-upload>
</u-form-item>
<u-form-item label="联系人" prop="reportUserName" required>
<u-input
v-model="form.reportUserName"
placeholder="请输入"
disabled
/>
</u-form-item>
<u-form-item label="联系方式" prop="reportUserMobile" required>
<u-input v-model="form.reportUserMobile" placeholder="请输入" />
</u-form-item>
<u-form-item label="所属企业" prop="reportEnterName" required>
<u-input v-model="form.reportEnterName" placeholder="请输入" />
</u-form-item>
</u-form>
<u-button @click="submit('uForm')" type="primary" style="margin-top: 15px"
>提交工单</u-button
>
</view>
</view>
</template>
<script>
import API from "@/api/api.js";
import dev from "@/api/dev.js";
import { listDictItems, workOrderinsert } from "@/api/repairs.js";
let urlAPI = require("@/static/config.js");
export default {
data() {
const validdaterateprop = (rule, value, callback) => {
if (value <= 0) {
callback(new Error("请评分"));
} else {
callback();
}
};
return {
title: "报修添加",
background: {
backgroundColor: "#558eff",
},
showType: false,
showType2: false,
listType: [
{
label: "室内",
value: "1",
},
{
label: "室外",
value: "2",
},
],
areaTypeLabel: "",
warrantyLabel: "",
form: {
areaType: "",
warrantyType: "",
name: "",
reportAdress: "",
description: "",
imgPath: "",
//取 uni.getStorageSync();
reportUserName: uni.getStorageSync("userName_u"),
reportUserMobile: uni.getStorageSync("contactWay_u"),
reportEnterName:
uni.getStorageSync("enterpriseName_u") &&
uni.getStorageSync("enterpriseName_u") !== "null"
? uni.getStorageSync("enterpriseName_u")
: "",
reportEnterId: uni.getStorageSync("enterpriseId_u"),
reportUserId: uni.getStorageSync("id_u"),
id: "",
},
rules: {
areaType: [
{
required: true,
message: "请选择报修类型",
trigger: ["blur", "change"],
},
],
warrantyType: [
{
required: true,
message: "请选择",
trigger: ["blur", "change"],
},
],
name: [
{
required: true,
message: "请输入名称",
trigger: ["blur", "change"],
},
],
reportAdress: [
{
required: true,
message: "请输入位置",
trigger: ["blur", "change"],
},
],
reportUserName: [
{
required: true,
message: "请输入名称",
trigger: ["blur", "change"],
},
],
reportUserMobile: [
{
required: true,
message: "请输入联系方式",
trigger: ["blur", "change"],
},
],
reportEnterName: [
{
required: true,
message: "请输入所属企业",
trigger: ["blur", "change"],
},
],
description: [
{
required: true,
max: 200,
message: "请输入描述",
trigger: ["blur"],
},
],
},
// action_: dev.imgUrl + "/sdfs/file/uploadImage",
action_: urlAPI.baseUrl_applet + "/sdfs/file/uploadImage",
header_: {
"author-token-key": uni.getStorageSync("token"),
},
fileList: [],
warrantyTypeList: [],
};
},
onl oad(e) {
console.log("e", e);
this._listDictItems();
},
// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
onReady() {
if (this.$refs.uForm) {
this.$refs.uForm.setRules(this.rules);
}
console.log("process.env.NODE_ENV", process.env.NODE_ENV);
},
watch: {},
methods: {
//报修类型
_listDictItems() {
listDictItems().then((res) => {
if (res.data.code == "00000") {
this.warrantyTypeList = res.data.data || [];
}
});
},
showTypeFun() {
this.showType = true;
},
getShowtype(e) {
this.form.areaType = e[0].value;
this.areaTypeLabel = e[0].label;
},
showTypeFun2(e) {
this.showType2 = true;
},
getShowtype2(e) {
this.form.warrantyType = e[0].value;
this.warrantyLabel = e[0].label;
},
submit(name) {
this.$refs[name].validate((valid) => {
if (valid) {
const params = Object.assign({}, this.form);
workOrderinsert(params).then((res) => {
if (res.data.code == "00000") {
uni.showToast({
title: "添加成功",
});
setTimeout(() => {
uni.navigateTo({
url: `/pages/repairs/repairs`,
});
}, 1000);
} else {
uni.showToast({
icon: "none",
title: res.data.desc,
});
}
});
} else {
console.log("验证失败");
}
});
},
successUpload(data, index, lists, name) {
if (data.code == "00000") {
let imgarr = [];
imgarr = lists.map((item) => {
return item.response.data;
});
this.form.imgPath = imgarr.join(",");
}
},
changeUpload(res, index, lists, name) {
// console.log("changeUpload", lists);
},
errorUpload(res, index, lists, name) {},
removeUpload(index, lists, name) {
let imgarr = [];
imgarr = lists.map((item) => {
return item.response.data;
});
this.form.imgPath = imgarr.join(",");
},
},
};
</script>
<style lang="scss">
.contain-box {
height: 100vh;
background-color: #fff;
.form-box {
padding: 18px;
}
}
</style>
标签：name,form,上传,uview,lists,res,imgarr,data,图片 From： https://www.cnblogs.com/Byme/p/16985020.html