jczz_web.git - Gitblit

New file
			@@ -0,0 +1,899 @@
			<!--
			* @Author: shuishen 1109946754@qq.com
			* @Date: 2023-12-14 17:10:00
			* @LastEditors: shuishen 1109946754@qq.com
			* @LastEditTime: 2024-01-09 18:59:37
			* @FilePath: \jczz_web\src\views\task\reportForRepairs.vue
			* @Description:
			*
			* Copyright (c) 2023 by shuishen, All Rights Reserved.
			-->
			<!-- 走访日志 -->
			<template>
			<basic-container>
			<avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" ref="crud" @row-del="rowDel"
			v-model="form" :permission="permissionList" @row-update="rowUpdate" @row-save="rowSave"
			:before-open="beforeOpen" @search-change="searchChange" @search-reset="searchReset"
			@selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
			@refresh-change="refreshChange" @on-load="onLoad">
			<template slot="confirmFlag" slot-scope="{row, size}">
			<el-tag :size="size" :type="showConfirmFlag(row.confirmFlag).type">
			{{ showConfirmFlag(row.confirmFlag).text }}
			</el-tag>
			</template>

			<template slot="expand" slot-scope="{row, size}">
			<el-timeline>
			<el-timeline-item v-for="(item, index) in timeLineData(row)" :key="index" :timestamp="item.createTime"
			:icon="item.icon" :color="item.color" :hide-timestamp="item.contentType == 3" placement="top">
			<el-card v-show="item.contentType == 1" :body-style="{ padding: '10px', background: '#f8f8f8' }">
			<div>
			评价：{{ item.content }}
			</div>
			<el-rate v-model="item.point" disabled :colors="colors">
			</el-rate>
			</el-card>

			<el-card v-show="item.peopleType != 1 && item.contentType == 0"
			:body-style="{ padding: '10px', background: '#f8f8f8' }">
			<div>
			{{ item.name }} {{ item.mobile }}
			</div>
			<div>
			{{ item.content }}
			</div>
			<div v-show="item.imageList != '' && item.imageList != null">
			<el-image style="width: 100px; height: 100px" :src="showCurImage(item.imageList)"
			:preview-src-list="showImageListData(item.imageList)">
			</el-image>
			</div>
			</el-card>

			<el-card v-show="item.peopleType == 1 && item.contentType == 0"
			:body-style="{ padding: '10px', background: '#f8f8f8' }">
			<span style="color: rgb(204, 204, 204);">系统:{{ item.content \|\| '959999' }}</span>
			</el-card>

			<span v-show="item.contentType == 3">结束</span>
			</el-timeline-item>


			<!-- <el-timeline-item timestamp="2018/4/12" placement="top">
			<el-card>
			<h4>更新 Github 模板</h4>
			<p>王小虎提交于 2018/4/12 20:46</p>
			</el-card>
			</el-timeline-item> -->
			</el-timeline>
			</template>

			<template slot-scope="{row, size, index}" slot="menu">
			<el-button :size="size" v-if="permission.report_for_repairs_details" type="text"
			icon="el-icon-document-remove" @click="rowExpansion(row)">
			详情
			</el-button>

			<el-button :size="size" v-if="permission.report_for_repairs_reply" type="text"
			icon="el-icon-chat-dot-square" :disabled="row.confirmFlag === 3" @click="replyBtnClick(row)">
			回复
			</el-button>

			<el-button :size="size" v-if="permission.report_for_repairs_turn_over" type="text"
			icon="el-icon-document-copy" :disabled="row.confirmFlag === 3" @click="turnOverBtnClick(row)">
			移交
			</el-button>

			<el-button :size="size" v-if="permission.report_for_repairs_del" type="text" icon="el-icon-delete"
			@click="rowDel(row)">
			删除
			</el-button>
			</template>

			<template slot="menuLeft">
			<el-button size="small" icon="el-icon-delete" plain v-if="permission.article_delete" @click="handleDelete">删
			除
			</el-button>
			</template>
			</avue-crud>

			<el-dialog title="回复" append-to-body :visible.sync="replyPopup" center @close="popupClose">
			<avue-form ref="replyForm" :option="replyOption" v-model="replyForm" @submit="handleSubmit"
			@reset-change="handleReset">
			<template slot-scope="{row}" slot="videoList">
			<el-upload class="video-uploader" action="/api/blade-resource/oss/endpoint/put-file"
			:file-list="fileList" :headers="updateHeader" :show-file-list="true" :limit="1" :on-change="getFile"
			:on-exceed="handleExceed" :on-success="uploadVideoProcess" :before-upload="beforeUploadVideo"
			:before-remove="beforeRemove">
			<el-button size="small" type="primary">点击上传</el-button>
			<div slot="tip" class="el-upload__tip">上传视频只能是 mp4 格式，且大小不能超过 50MB</div>
			</el-upload>
			</template>
			</avue-form>
			</el-dialog>

			<el-dialog title="转交" class="turn-over-popup" append-to-body :visible.sync="turnOverPopup" center
			@close="popupClose">
			<avue-form ref="turnOverForm" :option="turnOverOption" v-model="turnOverForm" @submit="turnOverHandleSubmit"
			@reset-change="turnOverHandleReset"></avue-form>
			</el-dialog>
			</basic-container>
			</template>

			<script>
			import {
			getList,
			remove,
			update,
			add,
			getReportForRepairs,
			saveReply
			} from "@/api/task/reportForRepairs"
			import {
			mapGetters
			} from "vuex"
			import website from '@/config/website'
			import {
			Base64
			} from 'js-base64'
			import {
			getToken
			} from '@/util/auth'

			export default {
			data () {
			let validatorPhone = function (rule, value, callback) {
			if (value) {
			if (!/^1[3456789]\d{9}$/.test(value)) {
			callback(new Error('手机号格式有误！'))
			} else {
			callback()
			}
			}
			callback()
			}

			return {
			colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
			form: {},
			query: {},
			loading: true,
			page: {
			pageSize: 10,
			currentPage: 1,
			total: 0,
			},
			datetime: "",
			selectionList: [],
			option: {
			labelWidth: 96,
			searchLabelWidth: 96,
			searchShow: true,
			searchMenuSpan: 3,
			menuWidth: 280,

			viewBtn: false,
			editBtn: false,
			delBtn: false,
			index: false,
			selection: false,
			expand: true,
			height: "auto",
			calcHeight: 54,
			dialogWidth: 950,
			tip: false,
			border: true,
			//stripe:true,
			// excelBtn: true,
			dialogClickModal: false,
			column: [
			{
			width: 100,
			label: "类型",
			prop: "type",
			span: 12,
			searchLabelWidth: 66,
			searchSpan: 4,
			search: true,
			dataType: "number",
			type: "select",
			dicUrl: "/api/blade-system/dict-biz/dictionary?code=reportForRepairsType",
			props: {
			label: "dictValue",
			value: "dictKey",
			},
			},
			{
			width: 110,
			label: "姓名",
			prop: "realName",
			span: 12,
			searchSpan: 4,
			searchLabelWidth: 66,
			search: true,
			},

			{
			width: 120,
			label: "手机号码",
			prop: "phone",
			search: true,
			searchSpan: 4,
			slot: true,
			rules: [{
			validator: validatorPhone,
			trigger: 'blur'
			}],
			},

			{
			width: 110,
			label: "图片",
			prop: "imageUrls",
			type: "upload",
			listType: "picture-card",
			dataType: "string",
			multiple: true,
			action: "/api/blade-resource/oss/endpoint/put-file",
			propsHttp: {
			res: "data",
			name: 'name',
			url: "link",
			},
			span: 24,
			},
			{
			overHidden: true,
			label: "地点",
			prop: "addressName",
			},
			{
			width: 100,
			label: "状态",
			addDisplay: false,
			editDisplay: false,
			slot: true,
			prop: "confirmFlag",
			overHidden: true
			},
			{
			width: 144,
			label: "上报时间",
			prop: "createTime",
			addDisplay: false,
			editDisplay: false,
			type: "date",
			format: "yyyy-MM-dd HH:mm:ss",
			valueFormat: "yyyy-MM-dd HH:mm:ss",
			},
			{
			width: 144,
			label: "处理时间",
			prop: "confirmTime",
			addDisplay: false,
			editDisplay: false,
			type: "date",
			format: "yyyy-MM-dd HH:mm:ss",
			valueFormat: "yyyy-MM-dd HH:mm:ss",
			},
			{
			label: "描述",
			prop: "remark",
			type: "textarea",
			hide: true,
			span: 24,
			}
			],
			},
			data: [],

			replyPopup: false,
			replyForm: {},
			replyOption: {
			submitBtn: true,
			submitText: '确定',
			emptyBtn: true,
			emptyText: '取消',

			column: [{
			span: 24,
			label: "说明",
			prop: "content",
			type: 'textarea',
			minRows: 3,
			maxRows: 5,
			rules: [{
			required: true,
			message: "请输入说明",
			trigger: "blur",
			}],
			},

			{
			label: '处理状态',
			prop: 'confirmFlag',
			type: 'select',
			dicData: [{
			label: '待处理',
			value: 1
			}, {
			label: '处理中',
			value: 2
			}, {
			label: '已处理',
			value: 3
			}],
			rules: [{
			required: true,
			message: "请选择处理状态",
			trigger: "blur",
			}],
			},

			{
			width: 110,
			fileType: 'img',
			label: "图片",
			prop: "imageList",
			type: "upload",
			listType: "picture-card",
			dataType: "string",
			multiple: true,
			action: "/api/blade-resource/oss/endpoint/put-file",
			propsHttp: {
			res: "data",
			name: 'name',
			url: "link",
			},
			span: 24,
			},

			{
			slot: true,
			label: "视频",
			prop: "videoList",
			span: 24,
			}
			]
			},

			turnOverPopup: false,
			turnOverForm: {},
			turnOverOption: {
			submitBtn: true,
			submitText: '确定',
			emptyBtn: true,
			emptyText: '取消',

			column: [
			// {
			// hide: true,
			// span: 14,
			// label: "地址",
			// prop: "addressCode",
			// },

			{
			span: 24,
			label: "人员类型",
			prop: "peopleType",
			type: 'select',
			dicData: [{
			label: '网格员',
			value: 0
			}, {
			label: '物业公司人员',
			value: 2
			}],
			cascader: ["transferUserId"],
			rules: [{
			required: true,
			message: "请选择人员类型",
			trigger: "blur",
			}],
			},

			{
			span: 24,
			label: "指定人员",
			prop: "transferUserId",
			type: 'select',
			dicUrl: `/api/blade-system/user/getUserInfoByCode?houseCode={{addressCode}}&type={{peopleType}}`,
			props: {
			label: "name",
			value: "id",
			},
			change: ({
			value,
			column,
			item,
			dic
			}) => {
			this.curPeopleDetails = {}

			if (value) {
			this.curPeopleDetails = item
			}
			},
			rules: [{
			required: true,
			message: "请选择指定人员",
			trigger: "blur",
			}],
			},
			]
			},

			curRow: {},

			fileList: [],
			updateHeader: {
			Authorization: `Basic ${Base64.encode(`${website.clientId}:${website.clientSecret}`)}`,
			'Blade-Auth': getToken()
			},

			curPeopleDetails: {},

			videoFlag: false,
			videoUploadPercent: ''
			}
			},
			watch: {},
			computed: {
			...mapGetters(["permission", "userInfo"]),
			permissionList () {
			return {
			addBtn: this.vaildData(this.permission.reportForRepairs_add, true),
			viewBtn: this.vaildData(this.permission.reportForRepairs_view, true),
			delBtn: this.vaildData(this.permission.reportForRepairs_delete, true),
			editBtn: this.vaildData(this.permission.reportForRepairs_edit, true),
			}
			},

			ids () {
			let ids = []
			this.selectionList.forEach((ele) => {
			ids.push(ele.id)
			})
			return ids.join(",")
			},

			timeLineData () {
			return (row) => {
			let imageList = row.imageUrls

			if (row.taskRepairAppraiseList.length) {
			return [{
			createTime: row.createTime,
			mobile: row.phone,
			name: row.realName,
			imageList,
			content: row.remark,
			color: '#1890ff',
			contentType: 0,
			},
			...row.taskRepairStepList.map((item, index) => {
			if (index == 0) {
			return {
			...item,
			contentType: 0,
			}
			}
			return {
			...item,
			contentType: 0
			}
			}),
			...row.taskRepairAppraiseList.map(item => {
			return {
			...item,
			contentType: 1
			}
			}),
			{
			contentType: 3,
			createTime: '',
			icon: 'el-icon-check',
			color: '#0bbd87'
			}
			]
			} else {
			return [{
			createTime: row.createTime,
			mobile: row.phone,
			name: row.realName,
			imageList,
			content: row.remark,
			color: '#1890ff',
			contentType: 0,
			},
			...row.taskRepairStepList.map((item, index) => {
			if (index == 0) {
			return {
			...item,
			contentType: 0,
			}
			}
			return {
			...item,
			contentType: 0
			}
			})
			]
			}
			}
			},

			showCurImage () {
			return (data) => {
			if (data != null && data.length > 0) {
			return data.split(',').filter(item => item != '')[0]
			}
			return ''
			}
			},

			showImageListData () {
			return (data) => {
			if (data != null && data.length > 0) {
			return data.split(',').filter(item => item != '')
			}
			return []
			}
			},

			showConfirmFlag () {
			return (data) => {
			let tags = {}

			if (data == 1) {
			tags = {
			type: 'warning',
			text: '待处理'
			}
			} else if (data == 2) {
			tags = {
			type: '',
			text: '处理中'
			}
			} else if (data == 3) {
			tags = {
			type: 'success',
			text: '已处理'
			}
			} else if (data == 4) {
			tags = {
			type: 'success',
			text: '已评价'
			}
			}

			return tags
			}
			}
			},
			methods: {
			rowExpansion (row) {
			this.$refs.crud.toggleRowExpansion(row)
			},

			popupClose () {
			this.$refs.replyForm && this.$refs.replyForm.resetForm()
			this.$refs.turnOverForm && this.$refs.turnOverForm.resetForm()
			},

			saveReply (data, done) {
			saveReply(data).then(
			() => {
			this.replyPopup = false
			this.turnOverPopup = false
			this.onLoad(this.page)
			this.$message({
			type: "success",
			message: "操作成功!",
			})
			done()
			},
			(error) => {
			window.console.log(error)
			}
			)
			},

			handleSubmit (form, done) {

			if (form.imageList.length > 0) {
			var urls = []
			var split = form.imageList.split(",").filter(item => item != '')
			split.forEach(url => {
			var names = url.split("jczz/")
			urls.push(names[1])
			})
			form.imageList = urls.join(",")
			}
			// if (form.imageList.length > 0) {
			// var urls = []
			// var split = form.imageList.split(",").filter(item => item != '')
			// split.forEach(url => {
			// var names = url.split("jczz/")
			// urls.push(names[1])
			// })
			// form.imageList = urls.join(",")
			// }

			this.saveReply({
			...form,
			videoList: this.fileList.map(item => item.response.data.link).join(','),
			repairId: this.curRow.id,
			peopleType: 0,
			mobile: this.userInfo.phone
			}, done)
			},

			handleReset () {
			this.fileList = []
			this.replyPopup = false
			},

			turnOverHandleSubmit (form, done) {
			let content = ''

			if (form.peopleType == 0) {
			content = `事件已移交至网格员 ${this.curPeopleDetails.name}`
			} else if (form.peopleType == 2) {
			content = `事件已移交至物业公司人员 ${this.curPeopleDetails.distictName \|\| ''}${this.curPeopleDetails.name}`
			}

			this.saveReply({
			...form,
			confirmFlag: 1,
			content,
			peopleType: 1,
			repairId: this.curRow.id,
			}, done)
			},

			turnOverHandleReset () {
			this.turnOverPopup = false
			},

			//移除
			beforeRemove (file, fileList) {
			return this.$confirm(`确定移除 ${file.name}？`).then(() => {
			this.fileList = fileList
			})
			},

			//上传
			getFile (file, fileList) {
			this.fileList = fileList
			},

			beforeUploadVideo (file) {
			const isLt50M = file.size / 1024 / 1024 < 50
			if (['video/mp4'].indexOf(file.type) == -1) {
			this.$message.error('上传视频只能是 mp4 格式!')
			return false
			}
			if (!isLt50M) {
			this.$message.error('上传视频大小不能超过 50MB!')
			return false
			}
			return true
			},

			handleExceed (files, fileList) {
			this.$message.warning("目前只能上传一个视频文件")
			},

			uploadVideoProcess (event, file, fileList) {
			console.log(event, file, fileList, this.fileList)
			},

			replyBtnClick (row) {
			this.curRow = row
			this.replyForm = {}
			this.replyPopup = true
			},

			turnOverBtnClick (row) {
			this.curRow = row
			this.turnOverForm = {
			addressCode: row.addressCode
			}
			this.turnOverPopup = true
			},

			rowSave (row, done, loading) {
			if (row.imageUrls.length > 0) {
			var urls = []
			var split = row.imageUrls.split(",")
			split.forEach(url => {
			var names = url.split("jczz/")
			urls.push(names[1])
			})
			row.imageUrls = urls.join(",")
			}
			add(row).then(
			() => {
			this.onLoad(this.page)
			this.$message({
			type: "success",
			message: "操作成功!",
			})
			done()
			},
			(error) => {
			window.console.log(error)
			loading()
			}
			)
			},
			rowUpdate (row, index, done, loading) {
			if (row.imageUrls.length > 0) {
			var urls = []
			var split = row.imageUrls.split(",")
			split.forEach(url => {
			var names = url.split("jczz/")
			urls.push(names[1])
			})
			row.imageUrls = urls.join(",")
			}
			update(row).then(
			() => {
			this.onLoad(this.page)
			this.$message({
			type: "success",
			message: "操作成功!",
			})
			done()
			},
			(error) => {
			window.console.log(error)
			loading()
			}
			)
			},
			rowDel (row) {
			this.$confirm("确定将选择数据删除?", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning",
			})
			.then(() => {
			return remove(row.id)
			})
			.then(() => {
			this.onLoad(this.page)
			this.$message({
			type: "success",
			message: "操作成功!",
			})
			})
			},
			searchReset () {
			this.query = {}
			this.onLoad(this.page)
			},
			searchChange (params, done) {
			this.query = params
			this.page.currentPage = 1
			this.onLoad(this.page, params)
			done()
			},
			selectionChange (list) {
			this.selectionList = list
			},
			selectionClear () {
			this.selectionList = []
			this.$refs.crud.toggleSelection()
			},
			handleDelete () {
			if (this.selectionList.length === 0) {
			this.$message.warning("请选择至少一条数据")
			return
			}
			this.$confirm("确定将选择数据删除?", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning",
			})
			.then(() => {
			return remove(this.ids)
			})
			.then(() => {
			this.onLoad(this.page)
			this.$message({
			type: "success",
			message: "操作成功!",
			})
			this.$refs.crud.toggleSelection()
			})
			},
			beforeOpen (done, type) {
			if (["edit", "view"].includes(type)) {
			getReportForRepairs(this.form.id).then((res) => {
			this.form = res.data.data
			if (this.form.imageUrls) {
			if (this.form.imageUrls.length > 0) {
			var urls = []
			var names = this.form.imageUrls.split(",")
			names.forEach(name => {
			urls.push(website.minioUrl + name)
			})
			this.form.imageUrls = urls.join(",")
			}
			}
			})
			}

			done()
			},
			currentChange (currentPage) {
			this.page.currentPage = currentPage
			},
			sizeChange (pageSize) {
			this.page.pageSize = pageSize
			},
			refreshChange () {
			this.onLoad(this.page, this.query)
			},
			onLoad (page, params = {}) {
			const {
			dateTime
			} = this.query
			let values = {
			...params,
			}
			if (dateTime) {
			values = {
			...params,
			startTime: dateTime[0],
			endTime: dateTime[1],
			...this.query,
			}
			values.dateTime = null
			}
			this.loading = true
			getList(page.currentPage, page.pageSize, values).then((res) => {
			const data = res.data.data
			this.page.total = data.total
			this.data = data.records
			this.data.forEach(item => {
			if (item.imageUrls) {
			if (item.imageUrls.length > 0) {
			var urls = []
			var names = item.imageUrls.split(",")
			names.forEach(name => {
			urls.push(website.minioUrl + name)
			})
			item.imageUrls = urls.join(",")
			}
			}
			if (item.taskRepairStepList.length > 0) {
			item.taskRepairStepList.forEach(ee => {
			if (ee.imageList) {
			if (ee.imageList.length > 0) {
			var urls = []
			var names = ee.imageList.split(",")
			names.forEach(name => {
			urls.push(website.minioUrl + name)
			})
			ee.imageList = urls.join(",")
			}
			}
			})
			}
			})
			this.loading = false
			this.selectionClear()
			})
			}
			},
			}
			</script>

			<style>
			.avue-upload__icon {
			line-height: 6;
			}
			</style>

	src/config/website.js	3 ●●●●● patch \| view \| raw \| blame \| history
	src/views/cGovernance/reportForRepairs.vue	899 ●●●●● patch \| view \| raw \| blame \| history
	vue.config.js	6 ●●●●● patch \| view \| raw \| blame \| history

			@@ -4,7 +4,7 @@
			export default {
			title: "saber",
			logo: "S",
			key: 'saber',//配置主键,目前用于存储
			key: 'saber', //配置主键,目前用于存储
			indexTitle: '基层智治综合协同平台',
			clientId: 'saber', // 客户端id
			clientSecret: 'saber_secret', // 客户端密钥
			@@ -44,6 +44,7 @@
			authUrl: 'http://localhost/blade-auth/oauth/render',
			// 报表设计器地址(cloud端口为8108,boot端口为80)
			reportUrl: 'https://srgdjczzxtpt.com:2080/jczz-ureport/ureport',
			// reportUrl: 'http://localhost:9528/ureport',
			// 单点登录系统认证(blade-auth服务的地)
			ssoUrl: 'http://localhost:8100/oauth/authorize?client_id=saber&response_type=code&redirect_uri=',
			// 单点登录回调地址(Saber服务的地址)

			@@ -18,7 +18,9 @@
			entry.add("@/mock").end();
			},
			css: {
			extract: { ignoreOrder: true },
			extract: {
			ignoreOrder: true
			},
			},
			//开发模式反向代理配置，生产模式请使用Nginx部署并配置反向代理
			devServer: {
			@@ -26,7 +28,7 @@
			proxy: {
			"/api": {
			//本地服务接口地址
			target: "https://srgdjczzxtpt.com:2080/api",
			// target: "https://srgdjczzxtpt.com:2080/api",
			// target: "http://z4042833u6.wicp.vip",
			// target: "http://localhost:9528",
			// target:"http://192.168.0.109:9528",