CZC/smart/src/views/parkingSpaceManagement/pageJump/parkingLotSaveEdits.vue

<template>
  <div class="alert-body__main_content">
    <div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="130px"
        class="demo-ruleForm"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="社区名称"
              prop="communityId"
            >
              <el-select
                v-model="ruleForm.communityId"
                placeholder="请选择社区名称"
                @change="communityChoice"
              >
                <el-option
                  v-for="(item, index) in communityList"
                  :label="item.label"
                  :value="item.id"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="车库区域">
              <el-select
                v-model="ruleForm.garageAreaId"
                placeholder="请选择车库区域"
                @change="garageAreaChoice"
              >
                <el-option
                  v-for="(item, index) in garageAreaList"
                  :label="item.label"
                  :value="item.id"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="前缀名称"
              v-if="codingStatus"
            >
              <el-input
                v-model="ruleForm.prefix"
                placeholder="如A-，可以不填写"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="起始编号"
              v-if="codingStatus"
              prop="parkingBeginNumber"
            >
              <el-input
                v-model.trim="ruleForm.parkingBeginNumber"
                oninput="value=value.replace(/[^0-9.]/g,'')"
              ></el-input>
            </el-form-item>

            <el-form-item
              label="车位编号"
              v-if="!codingStatus"
              prop="parkingNumber"
            >
              <el-input
                v-model.trim="ruleForm.parkingNumber"
                oninput="value=value.replace(/[^0-9.]/g,'')"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="车库名称"
              prop="garageId"
            >
              <el-select
                v-model="ruleForm.garageId"
                placeholder="请选择车库名称"
                @change="garageChoice"
              >
                <el-option
                  v-for="(item, index) in garageList"
                  :label="item.label"
                  :value="item.id"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="车位类别"
              prop="parkingType"
            >
              <el-radio
                v-model="ruleForm.parkingType"
                :label="1"
              >公共车位</el-radio>
              <el-radio
                v-model="ruleForm.parkingType"
                :label="2"
              >私人车位</el-radio>
            </el-form-item>
            <el-form-item label="车位面积">
              <el-input
                v-model="ruleForm.parkingArea"
                placeholder="请输入车位面积"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="结束编号"
              prop="parkingEndNumber"
              v-if="codingStatus"
            >
              <el-input v-model="ruleForm.parkingEndNumber"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-col :span="12">
          <el-form-item label="备注信息">
            <el-input
              type="textarea"
              :rows="3"
              v-model="ruleForm.remarks"
              maxlength="300"
              show-word-limit
              placeholder="请输入备注信息"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  props: ['params'],
  data () {
    var inputNumber = (rule, value, callback) => {
      if (!Number.isInteger(value)) {
        callback(new Error('请输入数字'));
      } else {
        callback();
      }
    };
    return {
      communityList: [], //社区名称下拉列表
      garageList: [], //车库名称下拉列表
      garageAreaList: [], //车库区域下拉列表
      codingStatus: true, //编码状态
      ruleForm: {
        communityId: '', //社区id
        // garageAreaId: '', //车库区域id
        areaCode: '',
        prefix: '', //前缀名称
        parkingBeginNumber: '', //车位起始编号
        parkingEndNumber: '', //车位结束编号
        garageId: '', //车库名称id
        parkingType: 1, //车位类别
        parkingArea: '', //车位面积
        remarks: '' //备注
      },

      rules: {
        communityId: [
          { required: true, message: '请输入社区名称', trigger: 'change' }
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        garageId: [{ required: true, message: '请选择车库名称', trigger: 'change' }],
        parkingType: [{ required: true, message: '请选择车位类别', trigger: 'change' }],
        parkingBeginNumber: [
          { required: true, message: '请填写起始编码', trigger: 'blur' }
          // { validator: inputNumber, trigger: 'blur' }
        ],
        parkingEndNumber: [
          { required: true, message: '请填写结束编码', trigger: 'blur' }
          // { validator: inputNumber, trigger: 'blur' }
        ],
        parkingNumber: [{ required: true, message: '请填写车位编号', trigger: 'change' }]
      },
      radio: '1'
    };
  },
  components: {},
  computed: {},
  methods: {
    //保存
    submit () {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          var loading = this.$loading();
          let url = '/czc-community/assets/garage/parking/add';
          if (this.params.todo == 'edit') {
            url = '/czc-community/assets/garage/parking/update';
          }
          this.$http
            .post(url, this.ruleForm)
            .then(({ status, msg }) => {
              if (status == 0) {
                this.$message.success(msg);
                this.params.callback();
                this.$emit('close');
              } else {
                this.$message.error(msg);
              }
              loading.close();
            })
            .catch(() => {
              loading.close();
            });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    //获取社区名称下拉列表
    communityNameList () {
      this.communityList = [];
      let onOption = '';
      this.$http.get('/czc-community/assets/community/list', {}).then((res) => {
        res.data.map((res) => {
          onOption = {
            label: res.communityName,
            id: res.id
          };
          this.communityList.push(onOption);
        });
      });
    },

    communityChoice (e) {
      console.log(e);
      this.ruleForm.communityId = e;
      this.garageNameList();
    },

    //获取车库名称下拉列表
    garageNameList () {
      this.garageList = [];
      let onOption = '';
      this.$http.post('/czc-community/assets/garage/list', { communityId: this.ruleForm.communityId }).then((res) => {
        res.data.map((res) => {

          onOption = {
            label: res.garageName,
            id: res.parkId
          };
          this.garageList.push(onOption);
        });
      });
    },

    garageChoice (e) {
      this.ruleForm.garageId = e;
      this.garageAreaListQuery();
    },

    garageAreaListQuery () {

      this.garageAreaList = [];
      let onOption = '';

      console.log(this.ruleForm.garageId);

      this.$http.post('/czc-community-web/parkingCar/findAreaInfo', { parkId: this.ruleForm.garageId }).then((res) => {
        res.data.map((res) => {
          onOption = {
            label: res.areaName,
            id: res.areaCode
          };
          this.garageAreaList.push(onOption);
        });
      });
    },

    garageAreaChoice (e) {

      this.ruleForm.areaCode = e;
    }
  },
  created () {
    //获取社区名称下拉列表
    this.communityNameList();

    if (this.params.todo == 'edit') {
      this.garageNameList();

      this.codingStatus = false;

      this.ruleForm = this.params.data;
      this.garageAreaListQuery();
    }
  }
};
</script>
<style lang='scss'>
.alert-body__main_content {
    .blockName {
        padding: 20px;
        i {
            color: red;
        }
    }
}
</style>