~zhangleilei/supipe.git

			@@ -7,400 +7,40 @@
			<el-tab-pane label="任务打卡" name="second"></el-tab-pane>
			</el-tabs>
			</div>
			<div class="main_header">
			<div class="header_item">
			<span class="header_label">巡检任务：</span>
			<el-input size="mini" v-model="queryInfo.task" placeholder="请输入巡检任务" clearable></el-input>
			</div>
			<div class="header_item">
			<span class="header_label">巡检人员：</span>
			<el-input size="mini" v-model="queryInfo.realName" placeholder="请输入巡检人员" clearable></el-input>
			</div>
			<div class="header_item">
			<el-button icon="el-icon-search" v-permission="'search'" @click="queryReset">查询</el-button>
			<el-button icon="el-icon-plus" v-permission="'insert'" @click="addRow">新增</el-button>
			</div>
			<div class="content">
			<component :is="cpns[activeName]"></component>
			</div>
			<div class="main_content">
			<cpn-table :table-index="true" :table-loading="tableConfig.loading" :table-data="tableConfig.tableData"
			:table-columns="tableConfig.tableColumns" :page-total="tableConfig.total" :page-num.sync="queryInfo.pageNum"
			:page-size.sync="queryInfo.pageSize" :page-change="pageChange">
			</cpn-table>
			</div>
			<!-- dialog -->
			<el-dialog width="400px" class="prop_dialog" v-if="isRenderDialog" :title="dialogTitle" :visible.sync="asyncVisible"
			@close="closeForm">

			<!-- <cpn-form :form-config="formConfig" :form-items="formConfig.formItems"></cpn-form> -->

			<el-form class="rule_form" ref="ruleForm" :model="ruleForm" :rules="rules" label-width="auto">

			<el-form-item label="巡检任务:" prop="task">
			<el-input v-model="ruleForm.task" placeholder="请输入巡检任务" clearable></el-input>
			</el-form-item>

			<el-form-item label="巡检标准:" prop="standard">
			<el-input type="textarea" v-model="ruleForm.standard" placeholder="请输入巡检标准" clearable></el-input>
			</el-form-item>

			<el-form-item label="巡检人员:" prop="realNames">
			<el-select v-model="ruleForm.realNames" multiple value-key="id" placeholder="请选择巡检人员">
			<el-option v-for="item in allPersons" :key="item.id" :label="item.label" :value="item"></el-option>
			</el-select>
			</el-form-item>

			<div class="divider"><span>巡检路线</span></div>

			<el-form-item label-width="0" v-for="(itemP, index) in ruleForm.paths " :key="index" :prop="'paths.' +
			index + '.value'" :rules="{ required: true, message: '请选择巡检路线', trigger: 'change' }">
			<el-select style="margin-right: 10px;width: 323px;" v-model="itemP.value" value-key="id"
			placeholder="请选择巡检路线">
			<el-option v-for=" item in allPath" :key="item.id" :label="item.label" :value="item"></el-option>
			</el-select>
			<el-button class="delete_btn" @click="delPath(itemP)">删除</el-button>
			<el-button class="table_btn" v-show="index === ruleForm.paths.length - 1"
			@click="addPath">添加</el-button>
			</el-form-item>
			<!-- <el-form-item label="区域名称:" prop="regionHazardInformId">
			<el-select v-model="ruleForm.regionHazardInformId" placeholder="请选择区域名称">
			<el-option v-for="item in areaNames" :key="item.id" :label="item.region" :value="item.id">
			</el-option>
			</el-select>
			</el-form-item> -->
			</el-form>
			<div slot="footer">
			<el-button @click="asyncVisible = false">取消</el-button>
			<el-button class="submit_btn" @click="onSubmit('ruleForm')">提交</el-button>
			</div>
			</el-dialog>
			</div>
			</template>
			<script>
			import {throttle} from '@/plugins/public'
			import cpnTable from '@/components/element/Table'
			// import cpnForm from '@/components/element/Form'
			import PollingTask from './components/PollingTask' // 巡检任务
			import TaskPunchcard from './components/TaskPunchcard' // 任务打卡
			export default {
			data() {
			return {
			isRenderDialog: false,
			asyncVisible: false,
			activeName: 'first', // tabs切换
			submitMode: '', // 提交方式: add / update
			allPersons: [], // 巡检人员
			allPath: [], // 巡检路线
			queryInfo: {
			pageNum: 1,
			pageSize: 10,
			task: '',
			realName: '',
			},
			ruleForm: {
			id: '',
			task: '',
			standard: '',
			realNames: [],
			paths: [
			{value: ''},
			],
			},
			rules: {
			task: [{required: true, message: '请输入巡检任务', trigger: 'blur'}],
			standard: [{required: true, message: '请输入巡检标准', trigger: 'blur'}],
			realNames: [{required: true, message: '请选择巡检人员', trigger: 'change'}],
			},
			tableConfig: {
			loading: true,
			tableData: [],
			tableColumns: [],
			total: 0,
			},
			formConfig: {}
			activeName: 'first',
			cpns: {
			first: 'PollingTask',
			second: 'TaskPunchcard',
			}
			}
			},
			components: {
			cpnTable,
			// cpnForm,
			PollingTask,
			TaskPunchcard,
			},
			computed: {
			isUpdate() {
			return this.submitMode === 'update'
			},
			dialogTitle() {
			return this.isUpdate ? '修改巡检任务' : '新增巡检任务'
			},
			},
			beforeCreate() {
			this.$http = this.$api.Safety.RiskGrad.polling
			},
			created() {
			this.setTableColumn()
			this.setFormColumn()
			this.getLists()
			},
			methods: {
			// 获取table列表数据
			getLists() {
			let params = this.queryInfo
			let tableConfig = this.tableConfig
			this.$http.getLists(params).then(res => {
			if (res.statusMsg === 'ok') {
			tableConfig.total = res.data.total
			tableConfig.tableData = res.data.list
			}
			tableConfig.loading = false
			})
			},
			// 获取管服人员数据(巡检人员)
			getPerson() {
			return new Promise(resolve => {
			this.$api.Personnerl.SEARCHMORTGAGEELIST({
			userType: 1,
			pageNum: 1,
			pageSize: 9999
			}).then((res) => {
			if (res.success) {
			const list = res.data.list
			const out = []
			list.forEach(item => {
			out.push({
			id: item.userId,
			label: item.realName,
			})
			})
			this.allPersons.push(...out)
			resolve()
			}
			})
			})
			},
			// 获取巡检路线
			getPath() {
			new Promise(resolve => {
			this.$api.Safety.RiskGrad.warning.getLists({
			pageNum: 1,
			pageSize: 9999
			}).then((res) => {
			if (res.success) {
			const list = res.data.list
			const out = []
			list.forEach(item => {
			out.push({
			id: item.id,
			label: item.region
			})
			})
			this.allPath.push(...out)
			resolve()
			}
			})
			})
			},
			// 初始化 table 配置
			setTableColumn() {
			this.tableConfig.tableColumns = [
			{index: true},
			{name: "巡检任务", key: "task"},
			{name: "巡检标准", key: "standard"},
			{name: "巡检人员", key: "regionUsersList", formatter: row => row.realNames},
			{name: "巡检路线", key: "regionList", formatter: row => row.regions},
			{
			operation: true, name: "操作", width: 140, value: [
			{name: "修改", permission: "update", handleRow: this.updateRow},
			{name: "删除", permission: "delete", handleRow: this.deleteRow},]
			},
			]
			},
			// 初始化 form 配置
			setFormColumn() {
			this.formConfig = {
			formModels: {
			task: '',
			standard: '',
			realNames: [],
			},
			formItems: [
			{type: 'input', label: '巡检任务'},
			{type: 'textarea', label: '巡检标准'},
			{
			type: 'select', label: '用户状态', options: this.allPersons,
			}
			// {
			// type: 'datepicker', label: '创建时间', otherOptions: {
			// startPlaceholder: '开始时间',
			// endPlaceholder: '结束时间',
			// type: 'daterange',
			// 'unlink-panels': true
			// }
			// }
			],
			itemColLayout: {
			span: 8
			}
			}
			},
			// 查询按钮列表信息
			queryReset() {
			this.queryInfo.pageNum = 1
			this.queryInfo.pageSize = 10
			this.getLists()
			},
			// 重置表单
			resetForm(formName) {
			this.$refs[formName].resetFields()
			this.ruleForm.paths = [{value: ''}]
			},
			// 显示表单
			async showForm() {
			!this.allPath.length && this.getPath()
			!this.allPersons.length && this.getPerson()
			!this.isRenderDialog && (this.isRenderDialog = true)
			this.asyncVisible = true
			},
			closeForm() {
			this.resetForm('ruleForm')
			this.asyncVisible = false
			},
			// 添加数据
			addRow() {
			this.submitMode = 'add'
			this.showForm()


			console.log(this.allPersons)
			console.log(this.formConfig)
			},
			updateRow(row) {
			this.submitMode = 'update'
			this.showForm()
			this.$nextTick(() => {
			const {id, task, standard, regionUsersList, regionList} = row
			const realNames = regionUsersList.map(item => {
			return {
			id: item.userId,
			label: item.realName,
			}
			})
			const paths = regionList.map(item => {
			return {
			value: {
			id: item.regionHazardInformId,
			label: item.region,
			},
			}
			})
			this.ruleForm = {
			id,
			task,
			standard,
			realNames,
			paths,
			}
			})
			},
			deleteRow(row) {
			const params = {id: row.id}
			this.$confirm("该操作将删除该信息，是否继续删除?", "提示", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning"
			}).then(() => {
			this.$http.delete(params).then(res => {
			if (res.statusMsg === 'ok') {
			this.queryReset()
			this.$message.success("删除成功！")
			} else {
			this.$message.warning(res.statusMsg)
			}
			})
			}).catch(() => {
			this.$message.warning("您已取消")
			})

			},
			// 提交表单
			onSubmit: throttle(function (formName) {
			this.$refs[formName].validate(valid => {
			if (!valid) return
			const {id, task, standard, realNames, paths} = this.ruleForm
			const regionList = paths.map((item, index) => {
			return {
			sort: index + 1,
			regionHazardInformId: item.value.id,
			}
			})
			const regionUsersList = realNames.map(item => {
			return {
			userId: item.id,
			}
			})
			const params = {
			task,
			standard,
			regionList,
			regionUsersList,
			}
			if (this.isUpdate) {
			// 更新
			params.id = id
			this.$http.update(params).then((res) => {
			if (res.statusMsg === 'ok') {
			this.closeForm()
			this.getLists()
			this.$message.success('更新成功！')
			} else {
			this.$message.warning(res.statusMsg)
			}
			})
			} else {
			// 添加
			this.$http.insert(params).then((res) => {
			if (res.statusMsg === 'ok') {
			this.closeForm()
			this.getLists()
			this.$message.success('添加成功！')
			} else {
			this.$message.warning(res.statusMsg)
			}
			})
			}
			})
			}, 1000),
			addPath() {
			this.ruleForm.paths.push({
			value: ''
			})
			},
			delPath(item) {
			var index = this.ruleForm.paths.indexOf(item)
			if (index !== -1) {
			this.ruleForm.paths.splice(index, 1)
			}
			},
			pageChange() {
			this.getLists()
			},
			}
			}
			</script>

			<style lang="scss" scoped>
			@import '@/style/layout-main.scss';

			.divider {
			position: relative;
			margin-bottom: 30px;
			text-indent: 10px;
			color: #fff;
			border-left: 3px solid #18F6F8;
			.main {
			display: flex;

			&::after {
			content: "";
			position: absolute;
			left: 0;
			bottom: -8px;
			width: 100%;
			padding: 20px 0;
			border-bottom: 1px solid #0C4D6F;
			.content {
			overflow: hidden;
			flex: 1;
			}
			}
			</style>