|
@@ -0,0 +1,256 @@
|
|
|
+<!-- -->
|
|
|
+<template>
|
|
|
+ <div class="tab1Edit">
|
|
|
+ <div class="top">
|
|
|
+ {{ ruleForm.id === "1" ? "园区概况" : "各楼宇人数统计" }}
|
|
|
+ </div>
|
|
|
+ <div class="from">
|
|
|
+ <el-form
|
|
|
+ :model="ruleForm"
|
|
|
+ :rules="rules"
|
|
|
+ ref="ruleForm"
|
|
|
+ label-width="130px"
|
|
|
+ class="demo-ruleForm"
|
|
|
+ >
|
|
|
+ <el-form-item label="综合大楼:" prop="complexBuilding">
|
|
|
+ <el-input
|
|
|
+ v-model.number="ruleForm.complexBuilding"
|
|
|
+ type="number"
|
|
|
+ ></el-input>
|
|
|
+ <span class="unit" v-if="ruleForm.id === '1'">m<sup>2</sup></span>
|
|
|
+ <span class="unit2" v-else>人</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="学术交流中心:" prop="exchangeCentre">
|
|
|
+ <el-input
|
|
|
+ v-model.number="ruleForm.exchangeCentre"
|
|
|
+ type="number"
|
|
|
+ ></el-input>
|
|
|
+ <span class="unit" v-if="ruleForm.id === '1'">m<sup>2</sup></span>
|
|
|
+ <span class="unit2" v-else>人</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="公寓楼:" prop="apartment">
|
|
|
+ <el-input
|
|
|
+ v-model.number="ruleForm.apartment"
|
|
|
+ type="number"
|
|
|
+ ></el-input>
|
|
|
+ <span class="unit" v-if="ruleForm.id === '1'">m<sup>2</sup></span>
|
|
|
+ <span class="unit2" v-else>人</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="综合服务中心:" prop="serviceCentre">
|
|
|
+ <el-input
|
|
|
+ v-model.number="ruleForm.serviceCentre"
|
|
|
+ type="number"
|
|
|
+ ></el-input>
|
|
|
+ <span class="unit" v-if="ruleForm.id === '1'">m<sup>2</sup></span>
|
|
|
+ <span class="unit2" v-else>人</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="科研楼:" prop="scientificBuilding">
|
|
|
+ <el-input
|
|
|
+ v-model.number="ruleForm.scientificBuilding"
|
|
|
+ type="number"
|
|
|
+ ></el-input>
|
|
|
+ <span class="unit" v-if="ruleForm.id === '1'">m<sup>2</sup></span>
|
|
|
+ <span class="unit2" v-else>人</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="更新时间:">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="time"
|
|
|
+ type="datetime"
|
|
|
+ placeholder="选择日期时间"
|
|
|
+ align="right"
|
|
|
+ :picker-options="pickerOptions"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <!-- 下面的按钮 -->
|
|
|
+ <div class="btn">
|
|
|
+ <el-button @click="$router.push('/layout/tab1')">返 回</el-button>
|
|
|
+ <el-button type="primary" @click="btnOk">提 交</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { parkSave } from '@/apis/tab1'
|
|
|
+export default {
|
|
|
+ name: 'tab1Edit',
|
|
|
+ components: {},
|
|
|
+ data () {
|
|
|
+ // 这里存放数据
|
|
|
+ const validatePass = (rule, value, callback) => {
|
|
|
+ if (value > 99999999.99) {
|
|
|
+ callback(new Error('不能超过99999999.99'))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ pickerOptions: {
|
|
|
+ shortcuts: [
|
|
|
+ {
|
|
|
+ text: '今天',
|
|
|
+ onClick (picker) {
|
|
|
+ picker.$emit('pick', new Date())
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '昨天',
|
|
|
+ onClick (picker) {
|
|
|
+ const date = new Date()
|
|
|
+ date.setTime(date.getTime() - 3600 * 1000 * 24)
|
|
|
+ picker.$emit('pick', date)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '一周前',
|
|
|
+ onClick (picker) {
|
|
|
+ const date = new Date()
|
|
|
+ date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
|
|
|
+ picker.$emit('pick', date)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ disTime: '',
|
|
|
+ time: '',
|
|
|
+ ruleForm: {
|
|
|
+ complexBuilding: '', // 综合大楼
|
|
|
+ exchangeCentre: '', // 学术交流中心
|
|
|
+ apartment: '', // 公寓楼
|
|
|
+ serviceCentre: '', // 综合服务中心
|
|
|
+ scientificBuilding: '' // 科研楼
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ complexBuilding: [
|
|
|
+ { required: true, message: '不能为空', trigger: 'blur' },
|
|
|
+ { validator: validatePass, trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ exchangeCentre: [
|
|
|
+ { required: true, message: '不能为空', trigger: 'blur' },
|
|
|
+ { validator: validatePass, trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ apartment: [
|
|
|
+ { required: true, message: '不能为空', trigger: 'blur' },
|
|
|
+ { validator: validatePass, trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ serviceCentre: [
|
|
|
+ { required: true, message: '不能为空', trigger: 'blur' },
|
|
|
+ { validator: validatePass, trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ scientificBuilding: [
|
|
|
+ { required: true, message: '不能为空', trigger: 'blur' },
|
|
|
+ { validator: validatePass, trigger: 'blur' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 监听属性 类似于data概念
|
|
|
+ computed: {},
|
|
|
+ // 监控data中的数据变化
|
|
|
+ watch: {
|
|
|
+ time (val) {
|
|
|
+ const temp = this.moment(val).format('YYYY-MM-DD HH:mm:ss')
|
|
|
+ this.disTime = temp
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 方法集合
|
|
|
+ methods: {
|
|
|
+ // 点击提交
|
|
|
+ async btnOk () {
|
|
|
+ if (this.time === null) return this.$message.warning('时间不能为空!')
|
|
|
+ try {
|
|
|
+ await this.$refs.ruleForm.validate()
|
|
|
+ const obj = {}
|
|
|
+ if (this.ruleForm.id === '1') {
|
|
|
+ obj.type = 'park'
|
|
|
+ } else if (this.ruleForm.id === '2') {
|
|
|
+ obj.type = 'building'
|
|
|
+ }
|
|
|
+ obj.id = Number(this.ruleForm.id)
|
|
|
+ obj.data = JSON.stringify(this.ruleForm)
|
|
|
+ obj.userUpdateTime = this.disTime
|
|
|
+ const res = await parkSave(obj)
|
|
|
+ if (res.code === 0) {
|
|
|
+ this.$message.success('修改成功')
|
|
|
+ this.$router.push('/layout/tab1')
|
|
|
+ }
|
|
|
+ // console.log(999, res)
|
|
|
+ // console.log(777777777777, obj)
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getCurrentTime () {
|
|
|
+ // 获取当前时间并打印
|
|
|
+ var _this = this
|
|
|
+ const yy = new Date().getFullYear()
|
|
|
+ const mm = new Date().getMonth() + 1
|
|
|
+ const dd = new Date().getDate()
|
|
|
+ const hh = new Date().getHours()
|
|
|
+ const mf =
|
|
|
+ new Date().getMinutes() < 10
|
|
|
+ ? '0' + new Date().getMinutes()
|
|
|
+ : new Date().getMinutes()
|
|
|
+ const ss =
|
|
|
+ new Date().getSeconds() < 10
|
|
|
+ ? '0' + new Date().getSeconds()
|
|
|
+ : new Date().getSeconds()
|
|
|
+ _this.gettime = yy + '/' + mm + '/' + dd + ' ' + hh + ':' + mf + ':' + ss
|
|
|
+ this.time = _this.gettime
|
|
|
+ // console.log(_this.gettime)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 生命周期 - 创建完成(可以访问当前this实例)
|
|
|
+ async created () {
|
|
|
+ this.ruleForm = this.$route.query
|
|
|
+ this.getCurrentTime()
|
|
|
+ // console.log(999, this.$route.query)
|
|
|
+ },
|
|
|
+ // 生命周期 - 挂载完成(可以访问DOM元素)
|
|
|
+ mounted () {},
|
|
|
+ beforeCreate () {}, // 生命周期 - 创建之前
|
|
|
+ beforeMount () {}, // 生命周期 - 挂载之前
|
|
|
+ beforeUpdate () {}, // 生命周期 - 更新之前
|
|
|
+ updated () {}, // 生命周期 - 更新之后
|
|
|
+ beforeDestroy () {}, // 生命周期 - 销毁之前
|
|
|
+ destroyed () {}, // 生命周期 - 销毁完成
|
|
|
+ activated () {} // 如果页面有keep-alive缓存功能,这个函数会触发
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang='less' scoped>
|
|
|
+.tab1Edit {
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ .top {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ background-color: #fbfbfb;
|
|
|
+ padding-left: 20px;
|
|
|
+ }
|
|
|
+ .from {
|
|
|
+ margin-top: 30px;
|
|
|
+ width: 50%;
|
|
|
+ .unit {
|
|
|
+ position: absolute;
|
|
|
+ right: -40px;
|
|
|
+ top: -5px;
|
|
|
+ }
|
|
|
+ .unit2 {
|
|
|
+ position: absolute;
|
|
|
+ right: -40px;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 200px;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ bottom: 30px;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|