|
@@ -0,0 +1,283 @@
|
|
|
+<template>
|
|
|
+ <div class="main">
|
|
|
+ <div class="blockName">{{ !isAdd ? '编辑' : '新增' }}巡更路线(<span class="show-required-icon-star"></span>为必填项)</div>
|
|
|
+ <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="formContent">
|
|
|
+ <div class="formContent-item">
|
|
|
+ <el-form-item label="所属社区" prop="communityId">
|
|
|
+ <el-select class="width100" v-model="ruleForm.communityId" placeholder="所属社区" clearable>
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in $parent.communityArr"
|
|
|
+ :key="index"
|
|
|
+ :label="item.communityName"
|
|
|
+ :value="item.id"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="巡更路线名称" prop="routeName">
|
|
|
+ <el-input v-model="ruleForm.routeName" placeholder="请输入巡更路线名称"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="巡更点" prop="routePointRelationDtos">
|
|
|
+ <el-transfer
|
|
|
+ v-model="ruleForm.routePointRelationDtos"
|
|
|
+ ref="transferTude"
|
|
|
+ filterable
|
|
|
+ :props="{
|
|
|
+ key: 'id',
|
|
|
+ label: 'pointName',
|
|
|
+ lan: 'latitude',
|
|
|
+ lng: 'longitude'
|
|
|
+ }"
|
|
|
+ :titles="['待选列表', '已选列表']"
|
|
|
+ @change="handleChange"
|
|
|
+ :data="patrolArr"
|
|
|
+ >
|
|
|
+ </el-transfer>
|
|
|
+ <map-value :point="targetData"></map-value>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="formContent-item">
|
|
|
+ <el-form-item label="巡更日期" prop="startDate">
|
|
|
+ <el-date-picker
|
|
|
+ class="width100"
|
|
|
+ v-model="effectiveDate"
|
|
|
+ value-format="yyyy-MM-dd "
|
|
|
+ type="daterange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="选择开始日期"
|
|
|
+ end-placeholder="选择结束日期"
|
|
|
+ @change="effectiveDateToggle"
|
|
|
+ :editable="false"
|
|
|
+ ></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="巡更时间" prop="communityName">
|
|
|
+ <div>
|
|
|
+ <el-time-picker
|
|
|
+ is-range
|
|
|
+ v-model="value1"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始时间"
|
|
|
+ end-placeholder="结束时间"
|
|
|
+ placeholder="选择时间范围"
|
|
|
+ >
|
|
|
+ </el-time-picker>
|
|
|
+ <div class="sunm">
|
|
|
+ <i class="zoniot_font zoniot-icon-tianjia1"></i>
|
|
|
+ </div>
|
|
|
+ <div class="sunm">
|
|
|
+ <i class="zoniot_font zoniot-icon-shanjian"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="巡更周期" prop="periodValue">
|
|
|
+ <el-radio-group v-model="ruleForm.periodType">
|
|
|
+ <el-radio :label="1">每周重复</el-radio>
|
|
|
+ <el-radio :label="2">间隔天数重复</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+
|
|
|
+ <el-checkbox-group v-if="ruleForm.periodType == 1" v-model="ruleForm.periodValue">
|
|
|
+ <el-checkbox :label="1">周一</el-checkbox>
|
|
|
+ <el-checkbox :label="2">周二</el-checkbox>
|
|
|
+ <el-checkbox :label="3">周三</el-checkbox>
|
|
|
+ <el-checkbox :label="4">周四</el-checkbox>
|
|
|
+ <el-checkbox :label="5">周五</el-checkbox>
|
|
|
+ <el-checkbox :label="6">周六</el-checkbox>
|
|
|
+ <el-checkbox :label="7">周日</el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ <div v-else class="periodValueInput">
|
|
|
+ 每隔
|
|
|
+ <el-input-number v-model="ruleForm.periodValue" controls-position="right" :min="0" :max="30"></el-input-number>
|
|
|
+ 天进行(输入0-30的数字,0代表每天都要进行任务)
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="定位距离(m)">
|
|
|
+ <el-input
|
|
|
+ v-model="ruleForm.positioningDistance"
|
|
|
+ placeholder="巡更定位距离,可输入1-100米,不输入则不检查定位距离"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="拍照/视频要求">
|
|
|
+ <el-select class="width100" v-model="ruleForm.cameraSettings" placeholder="请选择拍照/视频要求" clearable>
|
|
|
+ <el-option label="是" :value="1"></el-option>
|
|
|
+ <el-option label="否" :value="0"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注信息">
|
|
|
+ <el-input
|
|
|
+ type="textarea"
|
|
|
+ placeholder="请输入备注信息"
|
|
|
+ resize="none"
|
|
|
+ :rows="4"
|
|
|
+ v-model="ruleForm.remark"
|
|
|
+ maxlength="300"
|
|
|
+ show-word-limit
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ <div style="text-align: right">
|
|
|
+ <el-button @click="close">取消</el-button>
|
|
|
+ <el-button type="primary" @click="addEdit">保存</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import mapValue from './mapValue.vue';
|
|
|
+export default {
|
|
|
+ components: { mapValue },
|
|
|
+ props: {
|
|
|
+ params: {
|
|
|
+ type: Object
|
|
|
+ },
|
|
|
+ isAdd: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ ruleForm: {
|
|
|
+ communityId: '',
|
|
|
+ routeName: '',
|
|
|
+ routePointRelationDtos: [],
|
|
|
+ startDate: '',
|
|
|
+ endDate: '',
|
|
|
+ timePeriod: '',
|
|
|
+ periodType: 1,
|
|
|
+ periodValue: '',
|
|
|
+ positioningDistance: '',
|
|
|
+ cameraSettings: '',
|
|
|
+ remark: ''
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ communityId: [this.$valid.inputRequired('社区名称')],
|
|
|
+ routeName: [this.$valid.inputRequired('巡更路线名称')],
|
|
|
+ routePointRelationDtos: [this.$valid.inputRequired('巡更点')],
|
|
|
+ startDate: [this.$valid.selectRequired('巡更日期')],
|
|
|
+ timePeriod: [this.$valid.selectRequired('巡更时间')],
|
|
|
+ periodValue: [this.$valid.selectRequired('巡更周期')]
|
|
|
+ },
|
|
|
+ effectiveDate: [],
|
|
|
+ patrolArr: [],
|
|
|
+ targetData: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ 'ruleForm.communityId'(e) {
|
|
|
+ this.getPoint(e);
|
|
|
+ },
|
|
|
+ 'ruleForm.periodValue'(e) {
|
|
|
+ console.log(e);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //保存
|
|
|
+ addEdit() {
|
|
|
+ this.$refs.ruleForm.validate((valid) => {
|
|
|
+ console.log(this.ruleForm);
|
|
|
+ if (valid) {
|
|
|
+ let url = '/sc-community/assets/community/add';
|
|
|
+ let params = this.ruleForm;
|
|
|
+ if (!this.isAdd) {
|
|
|
+ url = '/sc-community/assets/community/update';
|
|
|
+ }
|
|
|
+ this.$http
|
|
|
+ .post(url, params)
|
|
|
+ .then(({ status, msg }) => {
|
|
|
+ if (status == 0) {
|
|
|
+ this.$message.success(msg);
|
|
|
+ this.close();
|
|
|
+ } else {
|
|
|
+ this.$message.error(msg);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getDetails(id) {
|
|
|
+ let url = '/sc-community/assets/community/find/' + id;
|
|
|
+ this.$http
|
|
|
+ .get(url)
|
|
|
+ .then(({ data, status, msg }) => {
|
|
|
+ if (0 === status) {
|
|
|
+ this.ruleForm = data;
|
|
|
+ this.regionId = [data.provinceId, data.cityId, data.regionId];
|
|
|
+ this.ruleForm.companyOrgId = data.beCompanyOrgId;
|
|
|
+ // this.companyOrgId = [null, null, data.companyOrgId];
|
|
|
+ // this.deptOrgId = [null, null, data.deptOrgId];
|
|
|
+ } else {
|
|
|
+ this.$message.error(msg);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ },
|
|
|
+ effectiveDateToggle(va) {
|
|
|
+ let arr = va;
|
|
|
+ if (!arr) {
|
|
|
+ arr = ['', ''];
|
|
|
+ }
|
|
|
+ this.ruleForm.startDate = arr[0];
|
|
|
+ this.ruleForm.endDate = arr[1];
|
|
|
+ },
|
|
|
+ handlePeriodValue(e) {
|
|
|
+ console.log(e);
|
|
|
+ },
|
|
|
+ close() {
|
|
|
+ this.$emit('clerOwnerStatus');
|
|
|
+ },
|
|
|
+ getPoint(id) {
|
|
|
+ this.$http.get('/sc-community/patrol/point/getPointList', { id, id }).then(({ data, status, msg }) => {
|
|
|
+ this.patrolArr = data;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleChange() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.targetData = this.$refs.transferTude.targetData;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ if (!!this.params && !!this.params.id) {
|
|
|
+ this.getDetails(this.params.id);
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang='scss' scoped>
|
|
|
+@import '@assets/css/public-style.scss';
|
|
|
+.main {
|
|
|
+ padding: 20px;
|
|
|
+ background: white;
|
|
|
+ .blockName {
|
|
|
+ padding-bottom: 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ border-bottom: 1px solid #e0e1e3;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.show-required-icon-star {
|
|
|
+ &:before {
|
|
|
+ content: '*';
|
|
|
+ color: #f56c6c;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.formContent {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .formContent-item {
|
|
|
+ width: 49%;
|
|
|
+ }
|
|
|
+ .periodValueInput {
|
|
|
+ color: #606266;
|
|
|
+ }
|
|
|
+ .sunm {
|
|
|
+ width: 15px;
|
|
|
+ text-align: center;
|
|
|
+ display: inline-block;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|