elink-star
/
ShibeiWorkPlatform_Frontend
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

UI 调整

shibei_master
jiangyy 3 years ago
parent
6d9492e4b0
commit
b51afde8c1
4 changed files with 145 additions and 171 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/views/modules/communityService/dqfwzx/cpts/edit.vue
  2. 205
      src/views/modules/communityService/dqfwzx/cpts/order.vue
  3. 106
      src/views/modules/communityService/dqfwzx/cpts/orderList.vue
  4. 3
      src/views/modules/communityService/dqfwzx/index.vue

2
src/views/modules/communityService/dqfwzx/cpts/edit.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<div> <div class="dialog-h-content scroll-h">
<el-form ref="ref_form" <el-form ref="ref_form"
:inline="true" :inline="true"
:model="dataForm" :model="dataForm"

205
src/views/modules/communityService/dqfwzx/cpts/order.vue
View File

@ -1,36 +1,28 @@
<template> <template>
<div> <div>
<div> <div class="dialog-h-content scroll-h">
<el-form <el-form ref="ref_form"
ref="ref_form" :inline="true"
:inline="true" :model="dataForm"
:model="dataForm" :rules="dataRule"
:rules="dataRule" :disabled="formType === 'detail'"
:disabled="formType === 'detail'" class="form">
class="form" <el-form-item label="事项名称"
> prop="matterName"
<el-form-item label-width="150px"
label="事项名称" style="display: block">
prop="matterName" <el-input class="item_width_1"
label-width="150px" maxlength="50"
style="display: block" show-word-limit
> v-model="info.matterName"
<el-input disabled>
class="item_width_1"
maxlength="50"
show-word-limit
v-model="info.matterName"
disabled
>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item <el-form-item label="预约日期"
label="预约日期" prop="appointmentDate"
prop="appointmentDate" label-width="150px"
label-width="150px" style="display: block">
style="display: block"
>
<!-- <el-date-picker <!-- <el-date-picker
v-model="dataForm.appointmentDate" v-model="dataForm.appointmentDate"
placeholder="预约日期" placeholder="预约日期"
@ -38,98 +30,77 @@
:picker-options="dateOptions" :picker-options="dateOptions"
> >
</el-date-picker> --> </el-date-picker> -->
<el-select v-model="dataForm.appointmentDate" placeholder="请选择"> <el-select v-model="dataForm.appointmentDate"
<el-option placeholder="请选择">
v-for="item in dateList" <el-option v-for="item in dateList"
:key="item" :key="item"
:label="item" :label="item"
:value="item" :value="item">
> </el-option>
</el-option </el-select>
></el-select>
</el-form-item> </el-form-item>
<el-form-item <el-form-item v-if="timeList.length > 0"
v-if="timeList.length > 0" label="预约时段"
label="预约时段" prop="timeId"
prop="timeId" label-width="150px"
label-width="150px" style="display: block">
style="display: block"
>
<div style="margin-left: auto; width: 600px"> <div style="margin-left: auto; width: 600px">
<el-checkbox <el-checkbox :label="item.timeId"
:label="item.timeId" :key="item.timeId"
:key="item.timeId" :disabled="!item.isAppointment"
:disabled="!item.isAppointment" v-for="(item, index) in timeList"
v-for="(item, index) in timeList" :checked="item.selected"
:checked="item.selected" :value="item.selected"
:value="item.selected" @change="selectTime(index)"
@change="selectTime(index)" @onChange="selectTime(index)">{{ item.time }}</el-checkbox>
@onChange="selectTime(index)"
>{{ item.time }}</el-checkbox
>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item <el-form-item label="预约人"
label="预约人" prop="appointmentName"
prop="appointmentName" label-width="150px"
label-width="150px" style="display: block">
style="display: block" <el-input class="item_width_1"
> maxlength="50"
<el-input show-word-limit
class="item_width_1" placeholder="请输入预约人"
maxlength="50" v-model="dataForm.appointmentName">
show-word-limit
placeholder="请输入预约人"
v-model="dataForm.appointmentName"
>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item <el-form-item label="联系方式"
label="联系方式" prop="appointmentPhone"
prop="appointmentPhone" label-width="150px"
label-width="150px" style="display: block">
style="display: block" <el-input class="item_width_1"
> maxlength="50"
<el-input show-word-limit
class="item_width_1" placeholder="请输入联系方式"
maxlength="50" v-model="dataForm.appointmentPhone">
show-word-limit
placeholder="请输入联系方式"
v-model="dataForm.appointmentPhone"
>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item <el-form-item label="备注"
label="备注" prop="remark"
prop="remark" label-width="150px"
label-width="150px" style="display: block">
style="display: block" <el-input class="item_width_1"
> type="textarea"
<el-input maxlength="1000"
class="item_width_1" show-word-limit
type="textarea" :rows="3"
maxlength="1000" placeholder="请输入备注，不超过1000字"
show-word-limit v-model="dataForm.remark"></el-input>
:rows="3"
placeholder="请输入备注，不超过1000字"
v-model="dataForm.remark"
></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<div class="div_btn"> <div class="div_btn">
<el-button @click="handleCancle">取 消</el-button> <el-button @click="handleCancle">取 消</el-button>
<el-button <el-button v-if="formType != 'detail'"
v-if="formType != 'detail'" type="primary"
type="primary" :disabled="btnDisable"
:disabled="btnDisable" @click="handleComfirm">确 定</el-button>
@click="handleComfirm"
>确 定</el-button
>
</div> </div>
</div> </div>
</template> </template>
@ -155,7 +126,7 @@ var infoWindowList;
let loading; // 加载动画 let loading; // 加载动画
export default { export default {
data() { data () {
return { return {
formType: "add", //表单操作类型 add新增，edit编辑，detail详情 formType: "add", //表单操作类型 add新增，edit编辑，detail详情
@ -166,7 +137,7 @@ export default {
}, },
dateOptions: { dateOptions: {
disabledDate(time) { disabledDate (time) {
return ( return (
time.getTime() < Date.now() - 3600 * 24 * 1 * 1000 || time.getTime() < Date.now() - 3600 * 24 * 1 * 1000 ||
time.getTime() > Date.now() + 3600 * 24 * 6 * 1000 time.getTime() > Date.now() + 3600 * 24 * 6 * 1000
@ -188,7 +159,7 @@ export default {
}, },
components: {}, components: {},
computed: { computed: {
dataRule() { dataRule () {
return { return {
appointmentName: [ appointmentName: [
{ required: true, message: "预约人不能为空", trigger: "blur" }, { required: true, message: "预约人不能为空", trigger: "blur" },
@ -212,10 +183,10 @@ export default {
}, },
}, },
async mounted() {}, async mounted () { },
methods: { methods: {
async initForm(type, row, index) { async initForm (type, row, index) {
this.$refs.ref_form.resetFields(); this.$refs.ref_form.resetFields();
let item = row.matterList[index]; let item = row.matterList[index];
@ -226,7 +197,7 @@ export default {
} }
}, },
selectTime(index) { selectTime (index) {
// return console.log(index); // return console.log(index);
let list = deepClone(this.timeList); let list = deepClone(this.timeList);
if (!list[index].isAppointment) return false; if (!list[index].isAppointment) return false;
@ -302,7 +273,7 @@ export default {
return false; return false;
}, },
async getDateList() { async getDateList () {
let url = "/gov/org/icpartyservicecenter/appointmenttime"; let url = "/gov/org/icpartyservicecenter/appointmenttime";
const { const {
@ -322,7 +293,7 @@ export default {
} }
}, },
async getTimeList() { async getTimeList () {
let url = "/gov/org/icpartyservicecenter/appointmenttime"; let url = "/gov/org/icpartyservicecenter/appointmenttime";
const { const {
@ -344,7 +315,7 @@ export default {
} }
}, },
async handleComfirm() { async handleComfirm () {
this.btnDisable = true; this.btnDisable = true;
setTimeout(() => { setTimeout(() => {
this.btnDisable = false; this.btnDisable = false;
@ -365,7 +336,7 @@ export default {
}); });
}, },
async submit() { async submit () {
let url = ""; let url = "";
if (this.formType === "add") { if (this.formType === "add") {
url = "/gov/org/icpartyservicecenter/appointment"; url = "/gov/org/icpartyservicecenter/appointment";
@ -391,11 +362,11 @@ export default {
} }
}, },
handleCancle() { handleCancle () {
this.resetData(); this.resetData();
this.$emit("dialogCancle"); this.$emit("dialogCancle");
}, },
resetData() { resetData () {
this.dataForm = { this.dataForm = {
matterId: "", matterId: "",
appointmentDate: "", appointmentDate: "",
@ -407,7 +378,7 @@ export default {
this.timeList = []; this.timeList = [];
}, },
// 开启加载动画 // 开启加载动画
startLoading() { startLoading () {
loading = Loading.service({ loading = Loading.service({
lock: true, // 是否锁定 lock: true, // 是否锁定
text: "正在加载……", // 加载中需要显示的文字 text: "正在加载……", // 加载中需要显示的文字
@ -415,7 +386,7 @@ export default {
}); });
}, },
// 结束加载动画 // 结束加载动画
endLoading() { endLoading () {
// clearTimeout(timer); // clearTimeout(timer);
if (loading) { if (loading) {
loading.close(); loading.close();

106
src/views/modules/communityService/dqfwzx/cpts/orderList.vue
View File

@ -1,55 +1,55 @@
<template> <template>
<div style="min-height: 400px"> <div style="min-height: 400px">
<el-form ref="ref_form" :inline="true" class="form"> <el-form ref="ref_form"
<el-form-item :inline="true"
label="选择预约日期" class="form">
prop="appointmentDate" <el-form-item label="选择预约日期"
label-width="110px" prop="appointmentDate"
style="display: block" label-width="110px"
> style="display: block">
<el-date-picker <el-date-picker v-model="appointmentDate"
v-model="appointmentDate" placeholder="预约日期"
placeholder="预约日期" value-format="yyyy-MM-dd">
value-format="yyyy-MM-dd"
>
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-table <el-table v-if="tableData.length > 0"
v-if="tableData.length > 0" :data="tableData"
:data="tableData" border
border style="width: 96%; margin: 0 auto"
style="width: 96%; margin: 0 auto" class="resi-table"
class="resi-table" :max-height="maxTableHeight">
:max-height="maxTableHeight" <el-table-column label="序号"
> type="index"
<el-table-column label="序号" type="index" align="center" width="50" /> align="center"
<el-table-column prop="matterName" label="预约事项"></el-table-column> width="50" />
<el-table-column <el-table-column prop="matterName"
prop="appointmentTime" label="预约事项"></el-table-column>
label="预约时间" <el-table-column prop="appointmentTime"
></el-table-column> label="预约时间"></el-table-column>
<el-table-column prop="appointmentName" label="预约人"></el-table-column> <el-table-column prop="appointmentName"
<el-table-column label="预约人"></el-table-column>
prop="appointmentPhone" <el-table-column prop="appointmentPhone"
label="联系方式" label="联系方式"></el-table-column>
></el-table-column> <el-table-column prop="remark"
<el-table-column prop="remark" label="备注"></el-table-column> label="备注"></el-table-column>
<el-table-column fixed="right" label="操作" align="center" width="120"> <el-table-column fixed="right"
label="操作"
align="center"
width="120">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button @click="handleCancel(scope.$index)"
@click="handleCancel(scope.$index)" type="text"
type="text" size="small">取消</el-button>
size="small"
>取消</el-button
>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div class="m-hint" v-else> <div class="m-hint"
<el-empty description="暂无内容" :image-size="200"></el-empty> v-else>
<el-empty description="暂无内容"
:image-size="200"></el-empty>
</div> </div>
</div> </div>
</template> </template>
@ -66,7 +66,7 @@ var infoWindowList;
let loading; // 加载动画 let loading; // 加载动画
export default { export default {
data() { data () {
return { return {
appointmentDate: new Date().toLocaleDateString().split("/").join("-"), appointmentDate: new Date().toLocaleDateString().split("/").join("-"),
matterId: "", matterId: "",
@ -82,10 +82,10 @@ export default {
}, },
}, },
async mounted() {}, async mounted () { },
methods: { methods: {
async init(row, index) { async init (row, index) {
let item = row.matterList[index]; let item = row.matterList[index];
if (item) { if (item) {
this.matterId = item.matterId; this.matterId = item.matterId;
@ -93,7 +93,7 @@ export default {
} }
}, },
async getList() { async getList () {
let url = "/gov/org/icpartyservicecenter/appointmentrecord"; let url = "/gov/org/icpartyservicecenter/appointmentrecord";
const { matterId, appointmentDate } = this; const { matterId, appointmentDate } = this;
@ -107,14 +107,14 @@ export default {
if (code === 0) { if (code === 0) {
this.tableData = data this.tableData = data
? data.map((item) => { ? data.map((item) => {
item.appointmentTime = item.appointmentTime.join("，"); item.appointmentTime = item.appointmentTime.join("，");
return item; return item;
}) })
: []; : [];
} else { } else {
} }
}, },
async handleCancel(index) { async handleCancel (index) {
let url = "/gov/org/icpartyservicecenter/cancelappointment"; let url = "/gov/org/icpartyservicecenter/cancelappointment";
const { matterId, tableData } = this; const { matterId, tableData } = this;
@ -132,15 +132,15 @@ export default {
} }
}, },
handleCancle() { handleCancle () {
this.resetData(); this.resetData();
this.$emit("dialogCancle"); this.$emit("dialogCancle");
}, },
resetData() { resetData () {
this.tableData = []; this.tableData = [];
}, },
// 开启加载动画 // 开启加载动画
startLoading() { startLoading () {
loading = Loading.service({ loading = Loading.service({
lock: true, // 是否锁定 lock: true, // 是否锁定
text: "正在加载……", // 加载中需要显示的文字 text: "正在加载……", // 加载中需要显示的文字
@ -148,7 +148,7 @@ export default {
}); });
}, },
// 结束加载动画 // 结束加载动画
endLoading() { endLoading () {
// clearTimeout(timer); // clearTimeout(timer);
if (loading) { if (loading) {
loading.close(); loading.close();

3
src/views/modules/communityService/dqfwzx/index.vue
View File

@ -98,6 +98,7 @@
:title="formTitle" :title="formTitle"
width="850px" width="850px"
top="5vh" top="5vh"
class="dialog-h"
@closed="handleClose"> @closed="handleClose">
<edit-form ref="eleEditForm" <edit-form ref="eleEditForm"
@dialogCancle="handleClose" @dialogCancle="handleClose"
@ -111,6 +112,7 @@
title="预约" title="预约"
width="850px" width="850px"
top="5vh" top="5vh"
class="dialog-h"
@closed="handleCloseForm2"> @closed="handleCloseForm2">
<order-form ref="eleOrderForm" <order-form ref="eleOrderForm"
@dialogCancle="handleCloseForm2" @dialogCancle="handleCloseForm2"
@ -124,6 +126,7 @@
title="预约记录" title="预约记录"
width="850px" width="850px"
top="5vh" top="5vh"
class="dialog-h"
@closed="handleCloseOrderList"> @closed="handleCloseOrderList">
<order-list ref="eleOrderList" <order-list ref="eleOrderList"
@dialogCancle="handleCloseOrderList"></order-list> @dialogCancle="handleCloseOrderList"></order-list>

Write Preview
Loading…
Cancel
Save