|
@@ -1,35 +1,38 @@
|
|
<template>
|
|
<template>
|
|
<!-- 对话框表单 -->
|
|
<!-- 对话框表单 -->
|
|
<el-dialog custom-class="ba-operate-dialog" :close-on-click-modal="false"
|
|
<el-dialog custom-class="ba-operate-dialog" :close-on-click-modal="false"
|
|
- :model-value="baTable.form.operate ? true : false" @close="baTable.toggleForm"
|
|
|
|
- width="30%"
|
|
|
|
- >
|
|
|
|
|
|
+ :model-value="baTable.form.operate ? true : false" @close="baTable.toggleForm"
|
|
|
|
+ width="30%"
|
|
|
|
+ >
|
|
<template #header>
|
|
<template #header>
|
|
<div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
|
|
<div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
|
|
- {{ baTable.form.operate ? baTable.form.operate == 'edit' ? '编辑' : '添加' : '无标题' }}
|
|
|
|
|
|
+ {{ baTable.form.operate ? baTable.form.operate == "edit" ? "编辑" : "添加" : "无标题" }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<el-scrollbar v-loading="baTable.form.loading">
|
|
<el-scrollbar v-loading="baTable.form.loading">
|
|
<div class="ba-operate-form" :class="'ba-' + baTable.form.operate + '-form'"
|
|
<div class="ba-operate-form" :class="'ba-' + baTable.form.operate + '-form'"
|
|
- style="width: calc(100% - 40px);margin-bottom: 40px;">
|
|
|
|
|
|
+ style="width: calc(100% - 40px);margin-bottom: 40px;">
|
|
<el-form ref="formRef" @keyup.enter="baTable.onSubmit(formRef)" :model="baTable.form.items"
|
|
<el-form ref="formRef" @keyup.enter="baTable.onSubmit(formRef)" :model="baTable.form.items"
|
|
- label-position="right" :label-width="'80px'" :rules="rules"
|
|
|
|
- v-if="!baTable.form.loading">
|
|
|
|
- <el-form-item prop="expressName" label="名称">
|
|
|
|
- <el-input v-model="baTable.form.items!.expressName" placeholder="请输入标题"></el-input>
|
|
|
|
|
|
+ label-position="right" :label-width="'100px'" :rules="rules"
|
|
|
|
+ v-if="!baTable.form.loading">
|
|
|
|
+ <el-form-item label="所在区(县)">
|
|
|
|
+ <el-select v-model="districtId" placeholder="请选择" @change="selectDstrict">
|
|
|
|
+ <el-option v-for="item in districtList" :label="item.districtName" :value="item.id"></el-option>
|
|
|
|
+ </el-select>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
- <el-form-item prop="expressType" label="类型">
|
|
|
|
- <el-select v-model="baTable.form.items!.expressType" placeholder="请选择类型" style="width: 100%" clearable>
|
|
|
|
- <el-option label="快递公司" :value='0' />
|
|
|
|
- <el-option label="物流公司" :value='1' />
|
|
|
|
|
|
+ <el-form-item prop="id" label="所在小区">
|
|
|
|
+ <el-select v-model="baTable.form.items!.id" placeholder="请选择" @change="selectCommunity">
|
|
|
|
+ <el-option v-for="item in communityList" :label="item.communityName" :value="item.id"></el-option>
|
|
</el-select>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
- <el-form-item prop="expressStatus" label="状态">
|
|
|
|
- <el-select v-model="baTable.form.items!.expressStatus" placeholder="请选择状态" style="width: 100%" clearable>
|
|
|
|
- <el-option label="正常" :value='0' />
|
|
|
|
- <el-option label="启用" :value='1' />
|
|
|
|
|
|
+ <el-form-item prop="ids" label="相关楼号">
|
|
|
|
+ <el-select v-model="baTable.form.items!.ids" placeholder="请选择" style="width: 100%" clearable multiple>
|
|
|
|
+ <el-option v-for="item in buildingList" :label="item.buildingNumber" :value="item.id"></el-option>
|
|
</el-select>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
|
+ <el-form-item prop="url" label="上传地图">
|
|
|
|
+ <pictureUpload v-model:fileUrl="baTable.form.items!.url"></pictureUpload>
|
|
|
|
+ </el-form-item>
|
|
</el-form>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
</el-scrollbar>
|
|
</el-scrollbar>
|
|
@@ -37,7 +40,7 @@
|
|
<div :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'">
|
|
<div :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'">
|
|
<el-button @click="baTable.toggleForm('')">取消</el-button>
|
|
<el-button @click="baTable.toggleForm('')">取消</el-button>
|
|
<el-button v-blur :loading="baTable.form.submitLoading" @click="baTable.onSubmit(formRef)" type="primary">
|
|
<el-button v-blur :loading="baTable.form.submitLoading" @click="baTable.onSubmit(formRef)" type="primary">
|
|
- {{ baTable.form.operateIds && baTable.form.operateIds.length > 1 ? '保存并编辑下一项' : '保存' }}
|
|
|
|
|
|
+ {{ baTable.form.operateIds && baTable.form.operateIds.length > 1 ? "保存并编辑下一项" : "保存" }}
|
|
</el-button>
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
@@ -45,72 +48,117 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
-import { ref, reactive, inject } from 'vue'
|
|
|
|
|
|
+import { ref, reactive, inject, onMounted } from "vue";
|
|
|
|
|
|
-import type baTableClass from '/@/utils/baTable'
|
|
|
|
-import type { ElForm, FormItemRule } from 'element-plus'
|
|
|
|
-import FormItem from '/@/components/formItem/index.vue'
|
|
|
|
-import { orderExpress } from '/@/api/controllerUrls'
|
|
|
|
-import { ElNotification } from 'element-plus/es'
|
|
|
|
|
|
+import type baTableClass from "/@/utils/baTable";
|
|
|
|
+import type { ElForm, FormItemRule } from "element-plus";
|
|
|
|
+import FormItem from "/@/components/formItem/index.vue";
|
|
|
|
+import { building_list, community_list, district_list, orderExpress } from "/@/api/controllerUrls";
|
|
|
|
+import { ElNotification } from "element-plus/es";
|
|
|
|
+import pictureUpload from "/@/components/pictureUpload/multiple.vue";
|
|
|
|
+import request from "/@/api/request";
|
|
|
|
|
|
-const formRef = ref<InstanceType<typeof ElForm>>()
|
|
|
|
-const baTable = inject('baTable') as baTableClass
|
|
|
|
|
|
+const formRef = ref<InstanceType<typeof ElForm>>();
|
|
|
|
+const baTable = inject("baTable") as baTableClass;
|
|
|
|
|
|
|
|
|
|
const rules: Partial<Record<string, FormItemRule[]>> = reactive({
|
|
const rules: Partial<Record<string, FormItemRule[]>> = reactive({
|
|
- expressName: [
|
|
|
|
- {
|
|
|
|
- required: true,
|
|
|
|
- message: '请输入名称',
|
|
|
|
- trigger: 'blur',
|
|
|
|
- },
|
|
|
|
- ],
|
|
|
|
- expressType: [
|
|
|
|
- {
|
|
|
|
- required: true,
|
|
|
|
- message: '请选择类型',
|
|
|
|
- trigger: 'blur',
|
|
|
|
- },
|
|
|
|
- ],
|
|
|
|
- expressStatus: [
|
|
|
|
- {
|
|
|
|
- required: true,
|
|
|
|
- message: '请选择状态',
|
|
|
|
- trigger: 'blur',
|
|
|
|
- },
|
|
|
|
- ],
|
|
|
|
-})
|
|
|
|
|
|
+ id: [
|
|
|
|
+ {
|
|
|
|
+ required: true,
|
|
|
|
+ message: "请选择",
|
|
|
|
+ trigger: "blur"
|
|
|
|
+ }
|
|
|
|
+ ],
|
|
|
|
+ ids: [
|
|
|
|
+ {
|
|
|
|
+ required: true,
|
|
|
|
+ message: "请选择",
|
|
|
|
+ trigger: "blur"
|
|
|
|
+ }
|
|
|
|
+ ],
|
|
|
|
+ url: [
|
|
|
|
+ {
|
|
|
|
+ required: true,
|
|
|
|
+ message: "请上传",
|
|
|
|
+ trigger: "blur"
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+});
|
|
|
|
+
|
|
|
|
+onMounted(() => {
|
|
|
|
+ getInitData();
|
|
|
|
+});
|
|
|
|
+
|
|
|
|
+//区县列表
|
|
|
|
+let districtList = ref([]);
|
|
|
|
+let districtId = ref("");
|
|
|
|
+
|
|
|
|
+function getInitData() {
|
|
|
|
+ request.index(district_list, {}, "").then((res: any) => {
|
|
|
|
+ if (res.code == 1) {
|
|
|
|
+ districtList.value = res.data;
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+//小区列表
|
|
|
|
+let communityList = ref([]);
|
|
|
|
+//选择区县,获取小区列表
|
|
|
|
+function selectDstrict(event: any) {
|
|
|
|
+ request.index(community_list, {
|
|
|
|
+ districtIds: event
|
|
|
|
+ }, "").then((res: any) => {
|
|
|
|
+ if (res.code == 1) {
|
|
|
|
+ communityList.value = res.data;
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+//楼号列表
|
|
|
|
+let buildingList = ref([]);
|
|
|
|
+//选择小区,获取楼号列表
|
|
|
|
+function selectCommunity(event: any) {
|
|
|
|
+ request.index(building_list, {
|
|
|
|
+ communityIds: event
|
|
|
|
+ }, "").then((res: any) => {
|
|
|
|
+ if (res.code == 1) {
|
|
|
|
+ buildingList.value = res.data;
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+}
|
|
|
|
+
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|
|
.avatar-uploader {
|
|
.avatar-uploader {
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- justify-content: center;
|
|
|
|
- position: relative;
|
|
|
|
- border-radius: var(--el-border-radius-small);
|
|
|
|
- box-shadow: var(--el-box-shadow-light);
|
|
|
|
- border: 1px dashed var(--color-sub-1);
|
|
|
|
- cursor: pointer;
|
|
|
|
- overflow: hidden;
|
|
|
|
- width: 110px;
|
|
|
|
- height: 110px;
|
|
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ position: relative;
|
|
|
|
+ border-radius: var(--el-border-radius-small);
|
|
|
|
+ box-shadow: var(--el-box-shadow-light);
|
|
|
|
+ border: 1px dashed var(--color-sub-1);
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ width: 110px;
|
|
|
|
+ height: 110px;
|
|
}
|
|
}
|
|
|
|
|
|
.avatar-uploader:hover {
|
|
.avatar-uploader:hover {
|
|
- border-color: var(--color-primary);
|
|
|
|
|
|
+ border-color: var(--color-primary);
|
|
}
|
|
}
|
|
|
|
|
|
.avatar {
|
|
.avatar {
|
|
- width: 110px;
|
|
|
|
- height: 110px;
|
|
|
|
- display: block;
|
|
|
|
|
|
+ width: 110px;
|
|
|
|
+ height: 110px;
|
|
|
|
+ display: block;
|
|
}
|
|
}
|
|
|
|
|
|
.image-slot {
|
|
.image-slot {
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- justify-content: center;
|
|
|
|
- height: 100%;
|
|
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ height: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|