SmartCommunity/operationSupport/src/views/businessManagement/opportunityManagement/setpPage/add.vue

<template>
  <div class="formContent">
    <el-form
      ref="formData"
      :model="formData"
      :rules="rules"
      label-width="85px"
      class="demo-ruleForm"
    >
      <div class="formContent-item_title">客户信息</div>
      <el-row>
        <el-col :span="8">
          <el-form-item
            label="客户姓名"
            prop="name"
            class="show-required-icon-star"
          >
            <el-input
              v-model="formData.name"
              clearable
              placeholder="请输入客户名称"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="客户手机"
            prop="telephon"
          >
            <el-input
              v-model="formData.telephon"
              clearable
              placeholder="请输入客户手机"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="客户类型"
            prop="customerType"
          >
            <el-select
              v-model="formData.customerType"
              @change="changeInformType"
              clearable
              class="dialog-select"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in informTypes"
                :key="index"
                :label="item.label"
                :value="item.status"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item
            label="商机来源"
            prop="businessOpportunity"
          >
            <el-select
              v-model="formData.businessOpportunity"
              @change="changeInformType"
              clearable
              class="dialog-select"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in Business"
                :key="index"
                :label="item.label"
                :value="item.status"
              >{{
                        item.label
                    }}</el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="需求类型"
            prop="demandType"
          >
            <el-select
              v-model="formData.demandType"
              @change="changeInformType"
              clearable
              class="dialog-select"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in Demand"
                :key="index"
                :label="item.label"
                :value="item.status"
              >{{
                        item.label
                    }}</el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="意向等级"
            prop="intentionLevel"
          >
            <el-select
              v-model="formData.intentionLevel"
              @change="changeInformType"
              clearable
              class="dialog-select"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in Intention"
                :key="index"
                :label="item.label"
                :value="item.status"
              >{{
                        item.label
                    }}</el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item
        label="备注"
        prop="remarks"
        style=""
      >
        <el-input
          type="textarea"
          :rows="4"
          show-word-limit
          v-model="formData.remarks"
          maxlength="300"
        ></el-input>
      </el-form-item>

      <div class="formContent-item_title">物业信息</div>
      <div
        v-for="(item, indexs) in timePeriod"
        :key="indexs"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item
              label="意向房屋"
              prop="timePeriod"
            >
              <el-select
                v-model="item.communityid"
                clearable
                class="dialog-select"
                placeholder="社区"
              >
                <el-option
                  v-for="(items, index) in community"
                  :key="index"
                  :label="items.name"
                  :value="items.value"
                  label-width="100px"
                  @click.native="changeInformcommunity(items, indexs)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-select
              v-model="item.buildingid"
              clearable
              class="dialog-select"
              placeholder="楼栋"
            >
              <el-option
                v-for="(buildingids, index) in Building[indexs]"
                :key="index"
                :label="buildingids.name"
                :value="buildingids.value"
                label-width="100px"
                @click.native="changeInformbuilding(buildingids, indexs)"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select
              v-model="item.unitid"
              clearable
              class="dialog-select"
              placeholder="单元"
            >
              <el-option
                v-for="(unitids, index) in unit[indexs]"
                :key="index"
                :label="unitids.name"
                :value="unitids.value"
                label-width="100px"
                @click.native="changeInformunit(unitids, indexs)"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select
              v-model="item.roomNumberid"
              clearable
              class="dialog-select"
              placeholder="房间号"
            >
              <el-option
                v-for="(roomNumberids, index) in roomNumber[indexs]"
                :key="index"
                :label="roomNumberids.name"
                :value="roomNumberids.value"
                label-width="100px"
                @click.native="changeInformroomNumber(roomNumberids)"
              >
              </el-option>
            </el-select>
          </el-col>
          <div
            class="sunm"
            @click="addTime(indexs, 1)"
            style="display: inline-block; line-height: 30px"
          >
            <i class="zoniot_font zoniot-icon-tianjia1"></i>
          </div>
          <div
            class="sunm"
            @click="addTime(indexs, -1)"
            v-if="timePeriod.length > 1 && indexs != 0"
            style="display: inline-block; line-height: 30px"
          >
            <i class="zoniot_font zoniot-icon-shanjian"></i>
          </div>
        </el-row>
      </div>
      <template>
        <div class="formContent-item_title">招商信息</div>
        <el-row>
          <el-col :span="8">
            <el-form-item
              label="招商人员"
              prop="username"
            >
              <el-cascader
                ref="userName"
                v-model="formData.userId"
                :props="defaultProps"
                :options="findUser"
                @change="findUserToggle"
              ></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
    </el-form>
  </div>
</template>

<script>
import list from '@utils/list';
export default {
  props: ['params'],
  data () {
    return {
      formData: {
        name: '',
        telephon: '',
        customerType: '',
        businessOpportunity: '',
        demandType: '',
        intentionLevel: '',
        remarks: '',
        communityid: '',
        buildingid: '',
        unitid: '',
        roomNumberid: '',

        userId: '',
        username: '',
        FnroomNumberid: []
      },
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
        ],
        telephon: [
          { required: true, message: '请输入电话', trigger: 'blur' },
        ],
        customerType: [
          { required: true, message: '请输确认类型', trigger: 'change' },
        ],
        businessOpportunity: [
          { required: true, message: '请确认商机来源', trigger: 'change' },
        ],
        demandType: [
          { required: true, message: '请确认需求类型', trigger: 'change' },
        ],
        intentionLevel: [
          { required: true, message: '请确认意向等级', trigger: 'change' },
        ],
        username: [
          { required: true, message: '请确认招商人员', trigger: 'change' },
        ]
      },
      timePeriod: [
        {
          communityid: '',
          Buildingid: '',
          unitid: '',
          roomNumberid: ''
        }
      ],
      informTypes: [
        {
          status: 0,
          label: '个人'
        },
        {
          status: 1,
          label: '企业'
        }
      ],
      Business: [
        {
          status: 1,
          label: '线上预约'
        },
        {
          status: 2,
          label: '线上电话'
        },
        {
          status: 3,
          label: '线下访问'
        }
      ],
      Demand: [
        {
          status: 0,
          label: '住宅'
        },
        {
          status: 1,
          label: '商业'
        }
      ],
      Intention: [
        {
          status: 1,
          label: '高'
        },
        {
          status: 2,
          label: '中'
        },
        {
          status: 3,
          label: '低'
        }
      ],
      // 社区
      community: [],
      // 楼栋
      Building: [],
      // 单元
      unit: [],
      // 房间号
      roomNumber: [],
      Merchants: [],
      listRes: [],
      room: 'false',
      urlencoded: [],
      findUser: [],
      defaultProps: {
        value: 'id', // 唯一标识
        label: 'label', // 标签显示
        children: 'children',
        emitPath: false
      }
    };
  },
  methods: {
    addTime (inx, sun) {
      if (sun > 0) {
        this.timePeriod.push({
          communityid: '',
          Buildingid: '',
          unitid: '',
          roomNumberid: ''
        });
        this.room = 'true';
      } else {
        this.timePeriod.splice(inx, 1);
        this.room = 'false';
      }
    },
    close () {
      this.$emit('initPage');
    },
    submit () {
      console.log('this.formData.intentionLevel', this.formData.intentionLevel);
      this.$refs.formData.validate((valid) => {
        if (valid) {
          let url = '/sc-community-web/business/add';
          if (this.params.todo == 'edit') {
            url = '/sc-community-web/business/edit';
          }
          let houseIds = [];
          this.timePeriod.map((item) => {
            houseIds.push(item.roomNumberid);
          });
          let installparams = {
            id: this.params.data,
            clientName: this.formData.name,
            clientPhone: this.formData.telephon,
            clientType: this.formData.customerType,
            businessSource: this.formData.businessOpportunity,
            demandSource: this.formData.demandType,
            intentionGrade: this.formData.intentionLevel,
            remark: this.formData.remarks,
            houseIds: houseIds,
            userId: this.formData.userId,
            username: this.formData.username
          };

          this.$http
            .post(url, installparams)
            .then(({ status, msg }) => {
              if (status == 0) {
                this.$message.success(msg);
                this.params.callback && this.params.callback();
                this.$emit('close');
              } else {
                this.$message.error(msg);
              }
            })
            .catch(() => { });
        }
      });
    },
    // 社区名称
    changeInformcommunity (items, index) {
      console.log(items);
      this.Fncommunity(items, index);
    },
    Fncommunity (items, index) {
      let BuildingArr = [];

      if (!!this.Building[index]) {
        this.Building[index] = items.children;
      } else {
        this.Building.push(items.children);
      }
    },
    // 单元
    changeInformbuilding (items, index) {
      this.Fnbuilding(items, index);
    },
    Fnbuilding (items, index) {
      let unitArr = [];
      for (let i = 0; i < items.length; i++) {
        unitArr.push({
          id: items[i].id,
          name: items[i].name,
          children: items.children
        });
      }
      debugger;
      if (items.children[0].type == 'room') {
        if (!!this.roomNumber[index]) {
          this.roomNumber[index] = items.children;
        } else {
          this.roomNumber.push(items.children);
        }
      } else {
        if (!!this.unit[index]) {
          this.unit[index] = items.children;
        } else {
          this.unit.push(items.children);
        }
      }
    },
    changeInformunit (items, index) {
      this.Fnunit(items, index);
    },
    Fnunit (items, index) {
      let roomNumberArr = [];
      for (let i = 0; i < items.length; i++) {
        roomNumberArr.push({
          id: items[i].id,
          name: items[i].name,
          children: items.children
        });
      }

      if (!!this.roomNumber[index]) {
        this.roomNumber[index] = items.children;
      } else {
        this.roomNumber.push(items.children);
      }
    },
    changeInformroomNumber (items) {
      // if (this.room == 'false') {
      //     this.formData.FnroomNumberid = [];
      // }
      // this.formData.FnroomNumberid.push(items.value);
    },
    findUserToggle () {
      this.formData.username = this.$refs.userName.getCheckedNodes()[0].label;
    }
  },
  created () {
    this.findUser = this.params.arrData;

    let url = '/sc-community/assets/tree/community/find?buildingType=1';
    this.$http.get(url).then(({ status, msg, data }) => {
      if (status == 0) {
        this.close();
        this.community = data;
      } else {
        this.$message.error(msg);
      }
    });
    if (this.params.todo == 'edit') {
      console.log(this.params.data);
      let url = `/sc-community-web/business/find/${this.params.data}`;
      this.$http.get(url).then(({ status, msg, data }) => {
        if (status == 0) {
          this.close();
          console.log('data', data);
          this.formData = {
            name: data.clientName + '',
            telephon: data.clientPhone + '',
            customerType: data.clientType,
            businessOpportunity: data.businessSource,
            demandType: data.demandSource,
            intentionLevel: data.intentionGrade,
            remarks: data.remark + '',
            userId: data.userId,
            username: data.username
          };
          let timePeriodObj = [];
          if (data.houseList.length == 0) {
            timePeriodObj = [
              {
                communityid: '',
                buildingid: '',
                unitid: '',
                roomNumberid: ''
              }
            ];
          } else {
            for (let i = 0; i < data.houseList.length; i++) {
              timePeriodObj.push({
                communityid: data.houseList[i].communityName,
                buildingid: data.houseList[i].buildingName,
                unitid: data.houseList[i].unitName,
                roomNumberid: data.houseList[i].roomNumber
              });
            }
          }
          this.timePeriod = timePeriodObj;
        } else {
          this.$message.error(msg);
        }
      });
    }
  }
};
</script>