myjadmin/src/components/system/signing/list.vue

<template>
	<div>
		<i-page-header :title="pageTitle"></i-page-header>
		<Card :bordered="false" dis-hover class="ivu-mt">
			<div style="padding: 20px 0;">
				<!-- <el-select v-model="detial.is_hot" placeholder="是否热门" style="margin:0px 10px 10px 0px;width: 140px;">
          <el-option label="选择是否热门" value=""></el-option>
          <el-option label="热门" value="1"></el-option>
          <el-option label="常规" value="0"></el-option>
        </el-select> -->
				<Input placeholder="请输入甲方姓名" style="width:140px;" class="mr10" v-model="detial.name" />
				<Input placeholder="请输入乙方姓名" style="width:140px;" class="mr10" v-model="detial.to_name" />
				<el-select v-model="detial.status" placeholder="签约状态" style="margin:0px 10px 10px 0px;width: 140px;">
					<el-option label="选择签约状态" value=""></el-option>
					<el-option label="未签约" :value="0"></el-option>
					<el-option label="进行中" :value="1"></el-option>
					<el-option label="已完成" :value="2"></el-option>
					<el-option label="已取消" :value="-1"></el-option>
				</el-select>

				<!-- <DatePicker style="width: 250px" format="yyyy-MM-dd HH:mm:ss" v-model="detial.time" type="datetimerange"
          placement="bottom-start" placeholder="更新时间范围" :options="options"></DatePicker> -->
				<el-button type="primary" style="margin-left: 6px;" @click="tapSeach">查询</el-button>
				<!-- <el-button type="danger" style="margin-top: 10px;" @click="tapAdd">添加模板</el-button> -->
			</div>

			<!-- <div class="muser-tab-continer">
        <a class="muser-tab-a" :class="detial.status == '' ? 'active' : ''" @click="statusChange('')">全部</a>
        <a class="muser-tab-a" :class="detial.status == '1' ? 'active' : ''" @click="statusChange('1')">上线</a>
        <a class="muser-tab-a" :class="detial.status == '0' ? 'active' : ''" @click="statusChange('0')">下架</a>
      </div> -->
			<el-table :data="detial.data" v-loading="detial.loading" :stripe="true" :border="true">
				<el-table-column prop="id" label="ID" width="80" align="center"></el-table-column>
				<el-table-column prop="contract_no" label="合约编号" width="120" align="center"></el-table-column>
				<!-- contract_no -->
				<el-table-column prop="name" label="甲方" width="250">
					<template slot-scope="scope">
						<div v-if="scope.row.content && scope.row.content.jsonAr">
							<div v-for="item in scope.row.content.jsonAr" v-if="item.type == 'text' || item.type == 'number'">{{item.name}}: {{item.value}}</div>
						</div>
						<div v-else>
							<div>姓名:{{ scope.row.name }}</div>
							<div>电话:{{ scope.row.phone }}</div>
							<div>地址:{{ scope.row.address }}</div>
							<div>身份证:{{ scope.row.card }}</div>
							<div>服务费：{{scope.row.price}}</div>
							<div>定金：{{scope.row.deposit}}</div>
							<div>尾款：{{scope.row.balance}}</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="to_name" label="乙方" width="200">
					<template slot-scope="scope">
						<div v-if="scope.row.content && scope.row.content.jsonBr">
							<div v-for="item in scope.row.content.jsonBr" v-if="item.type == 'text' || item.type == 'number'">{{item.name}}: {{item.value}}</div>
						</div>
						<div v-else>
							<div>姓名:{{ scope.row.to_name }}</div>
							<div>电话:{{ scope.row.to_phone }}</div>
							<div>地址:{{ scope.row.to_address }}</div>
							<div>身份证:{{ scope.row.to_card }}</div>
						</div>
						
					</template>
				</el-table-column>
				<el-table-column prop="total" label="状态" width="100" align="left">
					<template slot-scope="scope">
						<div>
							<el-tag type="primary" size="mini" v-if="scope.row.status == 1">进行中</el-tag>
							<el-tag type="warning" size="mini" v-if="scope.row.status == 0">待签约</el-tag>
							<el-tag type="success" size="mini" v-if="scope.row.status == 2">已完成</el-tag>
							<el-tag type="info" size="mini" v-if="scope.row.status == -1">已取消</el-tag>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="start_time" label="开始时间" width="200">
					<template slot-scope="scope">
						<div>{{scope.row.start_time | showTime}}</div>
					</template>
				</el-table-column>
				<el-table-column prop="end_time" label="结束时间" width="200">
					<template slot-scope="scope">
						<div>{{scope.row.end_time | showTime}}</div>
					</template>
				</el-table-column>
				<!-- <el-table-column prop="price" label="服务费" width="200"></el-table-column>
				<el-table-column prop="deposit" label="定金" width="100"></el-table-column>
				<el-table-column prop="balance" label="余款" width="150"></el-table-column> -->
				<!-- <el-table-column prop="give_score" label="赠送积分" width="100"></el-table-column> -->
				<!-- <el-table-column prop="describe" label="描述" width="200"></el-table-column> -->
				<el-table-column prop="uid_img" label="甲方签名" min-width="160" align="left">
					<template slot-scope="scope">
						<img v-lazy="scope.row.uid_img" :src="scope.row.uid_img" v-image-preview
							style="width: 60px;cursor: pointer;margin-right: 5px;" />
						<div v-if="scope.row.check_time">签约时间：{{scope.row.check_time | showTime}}</div>
					</template>
				</el-table-column>
				<el-table-column prop="to_uid_img" label="乙方签名" min-width="160" align="left">
					<template slot-scope="scope">
						<img v-lazy="scope.row.to_uid_img" :src="scope.row.to_uid_img" v-image-preview
							style="width: 60px;cursor: pointer;margin-right: 5px;" />
						<div v-if="scope.row.to_check_time">签约时间：{{scope.row.to_check_time | showTime}}</div>
					</template>
				</el-table-column>
				<!-- <el-table-column prop="descs" label="详情图" width="160" align="left">
            <template slot-scope="scope">
            <img v-for="(item,index) in scope.row.descs" :key="index" v-lazy="item" :src="item" v-image-preview style="width: 60px;cursor: pointer;margin-right: 5px;"/>
            </template>
      </el-table-column> -->
				
				<el-table-column prop="mark" label="附加条款" width="150"></el-table-column>
				<el-table-column prop="reason" label="终止原因" width="200"></el-table-column>
				<el-table-column prop="handle" label="操作" width="150" align="center">
					<template slot-scope="scope">
						<div><el-button plain size="mini" @click="tapDk(scope.row)">查看打卡</el-button></div>
						<br />
						<div><el-button plain size="mini" @click="tapPj(scope.row)">查看评价</el-button></div>
						<br />
						<div><el-button plain size="mini" v-if="scope.row.status == 1" @click="tapZz(scope.row)">终止合同</el-button></div>
					</template>
				</el-table-column>
			</el-table>
			<div class="acea-row row-right page">
				<Page :total="detial.pageCount" show-elevator show-total @on-change="tapPage"
					:page-size="detial.pageSize" />
			</div>
		</Card>
		<Modal v-model="dialogVisible" :title="title" @on-cancel="editClose" width="800">
			<div>
				<Table :columns="columns" :data="dk.data"></Table>
				<div class="acea-row row-right page">
					<Page :total="dk.pageCount" show-elevator show-total @on-change="tapPages"
						:page-size="dk.pageSize" />
				</div>
			</div>
		</Modal>
    <!-- 终止合同 模态框 -->
		<Modal v-model="zzdialogVisibles" :title="title" @on-cancel="editClose" width="800" >
			<div style="padding: 20px;">
				<el-form :model="form" label-width="100px">
					<el-form-item label="终止原因">
						<el-input type="textarea" v-model="reason" placeholder="请输入终止合同的原因" rows="4"></el-input>
					</el-form-item>
				</el-form>
				
			</div>
			<span slot="footer" class="dialog-footer">
			    <el-button @click="zzdialogVisibles = false">取 消</el-button>
			    <el-button type="primary" @click="confirmEndContract">确 定</el-button>
			  </span>
		</Modal>
		<Modal v-model="dialogVisibles" :title="title" @on-cancel="editCloses" width="800">
			<div>
				{{content || '暂无评价'}}
			</div>
		</Modal>
	</div>
</template>
<script>
	import {
		SystemShowTemplateList,
		SystemShowTemplateAdd
	} from "../../../api/system/showTemplate";

	import IPageHeader from "../../../layouts/system/page-header/index";
	import UiUpload from "@/ui/upload/index";
	import Setting from '@/setting';
	import {
		getSigningList,
		getDkList,
		getPjList,
		endComment
	} from '@/api/system/signing.js'
	export default {
		name: "system_showTemplate_list",
		components: {
			UiUpload,
			IPageHeader
		},
		computed: {},
		data() {
			return {
				checkItem: {
					id: 0
				},
				zzdialogVisibles: false,
				reason: '',//终止原因
				dialogVisibles: false,
				pageTitle: '预约列表',
				upHeaders: {},
				upUrl: "",
				cateData: [],
				dk: {
					uid: 0,
					contract_id: 0,

					data: [],
					page: 1,
					loading: true,
					pageSize: 0,
					pageCount: 0,
				},
				detial: {
					name: '',
					to_name: '',
					status: "",

					data: [],
					page: 1,
					loading: true,
					pageSize: 0,
					pageCount: 0,
				},
				columns: [{
						title: '打卡时间',
						key: 'create_time'
					},
					{
						title: '经度',
						key: 'longitude'
					},
					{
						title: '纬度',
						key: 'latitude'
					}
				],
				options: {
					shortcuts: [{
							text: '今天',
							value() {
								const end = new Date();
								const start = new Date();
								start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date()
									.getDate()));
								return [start, end];
							}
						},
						{
							text: '昨天',
							value() {
								const end = new Date();
								const start = new Date();
								start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(),
									new Date().getDate() - 1)));
								end.setTime(end.setTime(new Date(new Date().getFullYear(), new Date().getMonth(),
									new Date().getDate())));
								return [start, end];
							}
						},
						{
							text: '最近7天',
							value() {
								const end = new Date();
								const start = new Date();
								start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(),
									new Date().getDate() - 6)));
								return [start, end];
							}
						},
						{
							text: '最近30天',
							value() {
								const end = new Date();
								const start = new Date();
								start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(),
									new Date().getDate() - 29)));
								return [start, end];
							}
						},
						{
							text: '本月',
							value() {
								const end = new Date();
								const start = new Date();
								start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(),
									1)));
								return [start, end];
							}
						},
						{
							text: '本年',
							value() {
								const end = new Date();
								const start = new Date();
								start.setTime(start.setTime(new Date(new Date().getFullYear(), 0, 1)));
								return [start, end];
							}
						}
					]
				},
				dialogVisible: false,
				title: "",
				add_parms_name: "",
				formActiveName: "tab_base",
				form: {
					id: "",
					imgs: [],
					// descs          : [],
					status: 1,
					is_hot: 0,
					is_recommend: 0,
					is_init: 0,
					data: [],
				},
				defaultParms: [],
				content: '',
			}
		},
		created() {
			this.initView();
		},
		filters: {
			showTime(val) {
				let date = new Date(val * 1000)
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			}
		},
		methods: {
			/**
			 * 添加
			 */
			tapAdd: function(sassid) {
				var that = this;
				this.dialogVisible = true;
				that.add_parms_name = "",
					that.formActiveName = "tab_base",
					this.$refs['form'].resetFields();
				this.form = this.$utils.resetFields(this.form, {
					imgs: [],
					// descs          : [],
					status: 1,
					is_hot: 0,
					is_recommend: 0,
					data: JSON.parse(JSON.stringify(that.defaultParms)),
				});

			},
			initView: function() {
				var upHeaders = {};
				this.upUrl = Setting.apiBaseURL + "/systemv1/upload/index";
				const token = this.$utils.util.cookies.get('system_token');
				if (token) {
					upHeaders['SYSTEM-ACC-TOKEN'] = token;
				}
				this.upHeaders = upHeaders;
				this.getData();
			},
			removeParms: function(index) {
				this.$delete(this.form.data, index);
			},
			addParms: function() {
				var name = this.add_parms_name;
				if (this.add_parms_name) {
					this.form.data.push({
						title: name,
						content: "",
					})
					this.add_parms_name = "";
				}
			},
			statusChange: function(status) {
				this.detial.status = status;
				this.detial.page = 1
				this.getData()
			},
			/**
			 * 上传文件
			 * @param res
			 */
			onUpload: function(res) {
				if (res.code == -1) {
					Notice.error({
						title: "系统提示",
						content: res.msg
					});
				} else {
					this.form.imgs.push(res.data.img);
				}
			},
			onUploadDescs: function(res) {
				if (res.code == -1) {
					Notice.error({
						title: "系统提示",
						content: res.msg
					});
				} else {
					this.form.descs.push(res.data.img);
				}
			},
			tapEdit: function(row) {
				this.formActiveName = "tab_base";
				this.form = JSON.parse(JSON.stringify(row));
				this.dialogVisible = true;
				this.title = "编辑模板";
			},
			getDk() {
				this.dk.loading = true;
				getDkList(this.dk).then(res => {
					this.dk.loading = false;
					this.dk.data = res.data.list;
					this.dk.pageSize = res.data.pageSize;
					this.dk.pageCount = res.data.pageCount;
				}).catch(err => {
					this.dk.loading = false;
					this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示');
				});
			},
			getPj(id) {
				this.content = ''
				getPjList({
					contract_id: id
				}).then(res => {
					if(res.data && res.data.list && res.data.list.length > 0) {
						this.content = res.data.list[0].content
					}
				})
			},
			tapDk(item) {
				this.dialogVisible = true;
				this.title = "打卡记录";
				// this.dk.uid = item.to_uid
				// this.dk.contract_id = item.id
				this.getDk()
			},
			tapZz(item) {
				this.checkItem = item
				this.zzdialogVisibles = true;
				this.title = "终止合同";
			},
			tapPj(item) {
				this.dialogVisibles = true;
				this.title = "用户评价";
				console.log(item,item.contract_id)
				// this.dk.uid = item.to_uid
				// this.dk.contract_id = item.id
				this.getPj(item.id)
			},
			//关闭
			editClose: function() {
				this.dialogVisible = false;
				this.zzdialogVisibles = false;
			},
			editCloses: function() {
				this.dialogVisibles = false;
			},
			// 确认终止合同
			confirmEndContract: function() {
				if (!this.reason) {
					this.$alert('请输入终止合同的原因', '系统提示');
					return;
				}
				let loading = this.$loading("提交数据中...");
				endComment({
					id: this.checkItem.id,
					reason: this.reason
				}).then(res => {
					loading.close();
					if (res.code == 200) {
						this.zzdialogVisibles = false;
						this.$Message.success("操作成功");
						this.getData();
					} else {
						this.$alert(res.msg, '系统提示');
					}
				}).catch(err => {
					loading.close();
					this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
				});
			},
			removeImgs: function(index) {
				this.$delete(this.form.imgs, index);
			},
			removeDescs: function(index) {
				this.$delete(this.form.descs, index);
			},
			/**
			 * 修改数据
			 */
			subAdmin: function(e) {
				this.$refs['form'].validate((valid) => {
					if (valid) {
						let loading = this.$loading("提交数据中...");
						var data = {};
						for (var i in this.form) {
							data[i] = this.form[i];
						}
						SystemShowTemplateAdd(data)
							.then(res => {
								loading.close();
								if (res.code == 200) {
									this.dialogVisible = false;
									this.$Message.success("操作成功");
									this.getData();
								} else {
									this.$alert(res.msg, '系统提示');
								}
							})
							.catch(err => {
								loading.close();
								this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
							});
					}
				});
			},


			//搜索栏目
			tapSeach: function() {
				this.detial.page = 1;
				this.getData();
			},
			//分页
			tapPage: function(page) {
				this.detial.page = page;
				this.getData();
			},
			tapPages(page) {
				this.dk.page = page;
				this.getDk();
			},
			getData: function() {
				var data = {};
				var that = this;
				this.detial.loading = true;

				getSigningList(this.detial).then(res => {
					this.detial.loading = false;
					this.detial.data = res.data.list.map(item => {
						if(item.content) {
							try {
								item.content = JSON.parse(JSON.parse(item.content))
							} catch (error) {
								//TODO handle the exception
								item.content = JSON.parse(item.content)
							}
						}
						console.log(item.content);
						return item
					});
					this.detial.pageSize = res.data.pageSize;
					this.detial.pageCount = res.data.pageCount;
					// if(that.defaultParms.length<=0 && res.data.defaultParms){
					// 	that.defaultParms = res.data.defaultParms;
					// }
				}).catch(err => {
					this.detial.loading = false;
					this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示');
				});
			},
		}
	}
</script>
<style scoped>
	iframe.videoIframe {
		border: 0px;
		padding: 0px;
	}

	.el-dialog__body {
		padding: 0px;
	}

	.el-dialog__body iframe body {
		padding: 0px;
	}

	.muser-tab-continer {
		border: 1px solid #EEEEEE
	}

	a.muser-tab-a {
		display: inline-block;
		padding: 0px 28px;
		height: 42px;
		line-height: 42px;
		border-bottom: 3px solid transparent;
		font-size: 17px;
		color: #595959;
	}

	a.muser-tab-a.active {
		border-bottom: 3px solid #EA312B;
		color: #EA312B
	}

	.upimg-item {
		width: 82px;
		height: 82px;
		margin-right: 5px;
		overflow: hidden;
		float: left;
		margin-bottom: 5px;
		position: relative;
	}

	.upimg-item img {
		width: 82px;
		cursor: pointer;
	}

	.img-remove-btn {
		position: absolute;
		top: 0px;
		right: 0px;
		font-size: 24px;
	}
</style>