epmet-work-pc/src/views/modules/portrayal/house/index.vue

<template>
  <div class="g-main" v-loading="loading">
    <div class="right">
      <!-- <div class="editBtn">
        <el-button
          class="diy-button--add"
          type="primary"
          size="small"
          @click.native="handelClickHouseEdit"
          >编辑</el-button
        >
      </div> -->
      <div class="title-small" id="base">房屋信息</div>
      <el-row type="flex" justify="" class="f-m-top23">

        <el-col :span="6" class="f-flex">
          <div class="f-label">房屋编码：</div>
          <div class="f-left8 f-font-color" v-if="houseDetailObj">
            {{houseDetailObj.houseCode || "--" }}
          </div>
        </el-col>
        <el-col :span="6" class="f-flex">
          <div class="f-label">房屋类型：</div>
          <div class="f-left8 f-font-color" v-if="houseDetailObj">
            {{houseDetailObj.houseTypeName || "--" }}
          </div>
        </el-col>
        <el-col :span="6" class="f-flex">
          <div class="f-label">房屋用途：</div>
          <div class="f-left8 f-font-color" v-if="houseDetailObj">
            {{houseDetailObj.purposeName || "--" }}
          </div>
        </el-col>
        <el-col :span="6" class="f-flex">
          <div class="f-label">房屋状态：</div>
          <div class="f-left8 f-font-color" v-if="houseDetailObj">
            {{houseDetailObj.rentName || "--" }}
          </div>
        </el-col>
      </el-row>

      <el-row type="flex" justify="" class="f-m-top23">

        <el-col :span="6" class="f-flex">
          <div class="f-label">家庭标签：</div>
          <div class="f-left8 f-font-color" v-if="houseDetailObj.familyTags">
            {{familyTags() }}
          </div>
        </el-col>
        <el-col :span="6" class="f-flex">
          <div class="f-label">房主姓名：</div>
          <div class="f-left8 f-font-color" v-if="houseDetailObj">
            {{houseDetailObj.ownerName || "--" }}
          </div>
        </el-col>
        
        <el-col :span="6" class="f-flex">
          <div class="f-label">证件号：</div>
            <div class="f-left8 f-font-color">
              {{
                houseDetailObj.ownerIdCard
                  ? houseDetailObj.ownerIdCard
                  : "--"
              }}
            </div>
            <img
              v-show="showFlagIdCardBtn"
              src="@/assets/img/yanjing1.png"
              alt=""
              width="14px"
              style="margin-left: 10px"
            />
            <img
              v-show="!showFlagIdCardBtn"
              src="@/assets/img/yanjing2.png"
              alt=""
              width="14px"
              style="margin-left: 10px"
            />
            <el-button
              type="text"
              class="div-table-button--blue"
              size="small"
              @click="handelCLickShowCheckPassword('idCard')"
              >{{ showFlagIdCardBtn ? "显示" : "隐藏" }}</el-button
            >
        </el-col>
        <el-col :span="6" class="f-flex">
          <div class="f-label">联系电话：</div>
          <div class="f-left8 f-font-color">
            {{
              houseDetailObj.ownerPhone
                ? houseDetailObj.ownerPhone
                : "--"
            }}
          </div>
          <img
            v-show="showFlagMobileBtn"
            src="@/assets/img/yanjing1.png"
            alt=""
            width="14px"
            style="margin-left: 10px"
          />
          <img
            v-show="!showFlagMobileBtn"
            src="@/assets/img/yanjing2.png"
            alt=""
            width="14px"
            style="margin-left: 10px"
          />
          <el-button
            type="text"
            class="div-table-button--blue"
            size="small"
            @click="handelCLickShowCheckPassword('mobile')"
            >{{ showFlagMobileBtn ? "显示" : "隐藏" }}</el-button
          >
        </el-col>
      </el-row>

      <el-row type="flex" justify="" class="f-m-top23">

        <el-col :span="6" class="f-flex">
          <div class="f-label">备注：</div>
          <div class="f-left8 f-font-color" v-if="houseDetailObj">
            {{houseDetailObj.remark || "--" }}
          </div>
        </el-col>
        <el-col :span="6" class="f-flex">
          <div class="f-label">创建时间：</div>
          <div class="f-left8 f-font-color" v-if="houseDetailObj">
            {{houseDetailObj.createdTime || "--" }}
          </div>
        </el-col>
        <el-col :span="6" class="f-flex">
          <div class="f-label">更新时间：</div>
          <div class="f-left8 f-font-color" v-if="houseDetailObj">
            {{houseDetailObj.updatedTime || "--" }}
          </div>
        </el-col>
      </el-row>


      <div class="title-small">关系图谱
        <el-button type="primary" style="margin-left: 20px;" size="small"
                            @click="addResident()">新增居民</el-button>
      </div>
      
      <graph
        :houseInfo="houseDetailObj"
        v-if="houseDetailObj"
      />
      
      <div class="title-small" id="businessRecord">业务记录</div>
        <business-record :houseId="houseId"></business-record>
      <div class="title-small" id="updateRecord">更新记录</div>
        <change-record :tableData="houseChangeRecordList"></change-record>
    </div>
    <el-dialog title="密码验证" :visible.sync="showCheckPassword">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="form.password"
            autocomplete="off"
            type="password"
            placeholder="请输入当前账号密码"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showCheckPassword = false">取 消</el-button>
        <el-button type="primary" @click="handelClickCheckPassword"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { requestPost } from "@/js/dai/request";
import graph from "./cpts/graph.vue";
import businessRecord from "./cpts/businessRecord.vue";
import changeRecord from "./cpts/table/changeRecord.vue";

export default {
  data() {
    return {
      loading: true,
      checkType: "edit", //edit或者view
      houseChangeRecordList: [], //更新记录
      houseDetailObj: {}, //房屋详情
      showFlagIdCardBtn: true,
      showFlagMobileBtn: true,

      showCheckPassword: false,
      houseId:"",

      form: {
        password: "", //脱敏确认密码
      },
      rules: {
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      familyTagList:[]
    };
  },
  components: { graph, businessRecord, changeRecord },
  created() {
    this.getFamilyTagsDict()
  },
  mounted() {},
  activated() {},
  methods: {
    // 更新记录
    async getChangeRecordDetailById() {
      try {
        const { data } = await this.$http.get(
          `/actual/base/peopleRoomOverview/houseResidentChangeRecord?houseId=${this.houseId}`
        );
        if (data.data == null) {
          this.houseChangeRecordList = [];
        } else {
          this.houseChangeRecordList = data.data;
        }
      } catch (error) {
        console.log(error);
      }
    },
    
    getHouseDetail() {
      this.$http
        .post(`/actual/base/communityHouse/getMaskedHouseDeatilById/${this.houseId}`)
        .then(async (res) => {
          if (res.data.code === 0) {
            this.houseDetailObj = res.data.data || {};
            
          } else if (res.data.code >= 8000) {
            this.houseDetailObj = {};
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
      this.loading = false;
    },
    handelClickHouseEdit() {
      this.checkType = "edit";
      this.showCheckPassword = true;
    },
    
    handelCLickShowCheckPassword(type) {
      this.form.password = "";
      this.checkType = "view";
      if (type === "idCard") {
        if (this.showFlagIdCardBtn) {
          this.showCheckPassword = true;
        } else {
          this.showFlagIdCardBtn = true;
          this.$set(
            this.houseDetailObj,
            "ownerIdCard",
            this.houseDetailObj.ownerIdCard.substr(0, 11) +
              "****" +
              this.houseDetailObj.ownerIdCard.substr(16, 2)
          );
        }
      } else if (type === "mobile") {
        if (this.showFlagMobileBtn) {
          this.showCheckPassword = true;
        } else {
          this.showFlagMobileBtn = true;
          this.$set(
            this.houseDetailObj,
            "ownerPhone",
            this.houseDetailObj.ownerPhone.substr(0, 3) +
              "****" +
              this.houseDetailObj.ownerPhone.substr(7, 4)
          );
        }
      }
      this.tuominType = type;
    },
    
    handelClickCheckPassword() {
      this.$refs.form.validate((vali) => {
        if (vali) {
          this.handleSaveTuomin(this.form.password);
        } else {
          return false;
        }
      });
    },

    addResident(){
      // this.$router.push({ name: 'add-resi' });
      this.$router.push({
            name: "add-resi",
            params: { agencyId: "1673584241869238273",gridId: "1673585475279826946",villageId:"1673600667388780545",buildId:"1673600667527192577",unitId:"1673600667577524226",homeId:"1673600737530126338"},
          });
    },
    
    getFamilyTagsDict(){
      this.$http.post("sys/dict/data/dictlist", {
            dictType: 'family_tag',
          }).then(res=>{
           if(res.data.code === 0){
              this.familyTagList = res.data.data;
           }
          }).catch(err=>{
            console.log(err);
          })
    },
    familyTags(){
        const labels = this.houseDetailObj.familyTags.map(value => {
          const item = this.familyTagList.find(obj => obj.value === value);
          return item ? item.label : null;
      });
      return labels?labels.join('，'):'--';
    },
    async handleSaveTuomin(password) {
      const url = `/actual/base/communityHouse/getClearHouseDeatilById/${this.houseId}`;
      let parm = {
        password,
      };
      const { data, code, msg } = await requestPost(url, parm);
      if (code === 0) {
        if (this.tuominType === "mobile") {
            this.$set(this.houseDetailObj, "ownerPhone", data.ownerPhone);
            this.showFlagMobileBtn = !this.showFlagMobileBtn;
          }
          if (this.tuominType === "idCard") {
            this.$set(this.houseDetailObj, "ownerIdCard", data.ownerIdCard);
            this.showFlagIdCardBtn = !this.showFlagIdCardBtn;
          }
          this.showCheckPassword = false;
      } else {
        this.$message.error(msg);
      }
    },
  },
  computed: {},
  watch: {
    "$store.state.huaXiang.houseInfo.houseId": {
      handler(newValue, oldValue) {
        this.houseId = newValue;
        this.houseDetailObj = {};
        this.houseGraphObj = {};

        this.getHouseDetail();
        this.getChangeRecordDetailById();
        
        this.loading = false;
      },
      deep: true, // 开启深度监听
      immediate: true, // 立即触发一次handler
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/pages/resiInfo.scss";
@import "@/assets/scss/modules/management/list-main.scss";
</style>