epmet-work-pc-chengyang/src/views/modules/communityService/gxxq/detailForm.vue

<template>
  <div>
    <div class="dialog-h-content scroll-h">
      <div v-if="initLoading" class="m-row">
        <div class="m-info">
          <div class="info-prop">
            <span class="info-title-2">需求类别: </span>
            <span>{{ formData.allCategoryName || "--" }}</span>
          </div>

          <!-- <div class="info-prop">
            <span class="info-title-2">服务组织：</span>
            <span>{{ serviceOrgName || "--" }}</span>
          </div> -->

          <div class="info-prop">
            <span class="info-title-2">需求标题: </span>
            <span>{{ formData.title || "--" }}</span>
          </div>

          <div class="info-prop">
            <span class="info-title-2">详细说明：</span>
            <span>{{ formData.content || "--" }}</span>
          </div>
          <div class="info-prop">
            <span class="info-title-2">享受服务人员: </span>
            <span>{{ resiSearchTagName}}</span>
          </div>

          <template v-if="formData.assignFlag == '1'">
            <div class="info-prop">
              <span class="info-title-2">指派服务：</span>
              <span>{{
                formData.assignFlag == "1"
                  ? "已指派"
                  : formData.assignFlag == "0"
                  ? "未指派"
                  : "--"
              }}</span>
            </div>
            <div class="info-prop" v-if="formData.assignFlag == 1">
              <span class="info-title-2">服务组织：</span>
                <span>{{ serverOrgType }} - {{serverOrgName}}</span>
            </div>
            <div class="info-prop">
              <span class="info-title-2">服务范围：</span>
              <span
                v-for="item in formData.assignInfo.serviceScopeList"
                :key="item.objectId"
              >
                <span>{{ item.objectName }}</span>
              </span>
            </div>

            <div class="info-prop">
              <span class="info-title-2">服务时间：</span>
              <span>{{ formData.assignInfo.serviceTimeStart|| "--" }}</span> 至
              <span>{{ formData.assignInfo.serviceTimeEnd|| "--" }}</span>
            </div>
          </template>
        </div>
      </div>
    </div>

    <div class="div-btn"></div>
    <el-row type="flex" justify="right">
      <el-col :span="24" align="right">
        <el-button size="small" @click="handleCancle" style="margin-right: 16px"
          >关 闭</el-button
        >
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { Loading } from "element-ui"; // 引入Loading服务
import { requestPost, requestGet } from "@/js/dai/request";

let loading; // 加载动画

export default {
  data() {
    return {
      initLoading: false,

      keyWords: "",
      formData: {},
      resiSearchTagName: "",
      ServiceTypeName:'',
      policyId: "",
      showPersonList: false,
      ruleList: [],
      policyList: [],
      serviceOptions:[],
      serviceOptiondList:[]
    };
  },
  components: {},
  async mounted() {
    await this.getPolicyList();
    await this.loadInfo();
    await this.getDictOptions()
    await this.getServiceuserList()
    // if (this.gxxqId) {//详情
    this.initLoading = true;
  },

  methods: {
    async loadRuleList() {
      const url = "/governance/policy/rulelist/" + this.policyId;

      let params = {};

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.ruleList = data;
      } else {
        this.$message.error(msg);
      }
    },

    handleClose() {
      this.showPersonList = false;
    },

    async getPolicyList() {
      const url = "/governance/policy/policyList";

      let params = {};

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.policyList = data;
      } else {
        this.$message.error(msg);
      }
    },
    //加载详情信息
    async loadInfo() {
      const url = `/governance/commonDemand/detail/${this.gxxqId}`;

      // let params = {
      //   id: this.gxxqId,
      // };

      const { data, code, msg } = await requestGet(url);

      if (code === 0) {
        console.log(data);
        this.formData = { ...data };
        this.formData.gxxqId = this.gxxqId;
        await this.getTagName();
      } else {
        this.$message.error(msg);
      }
    },
    async getDictOptions() {
      this.$http
        .post("/sys/dict/data/dictlist", {
          dictType: "user_demand_service_type",
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.serviceOptions = res.data;
          }
        })
        .catch(() => {
          return this.$message.error("网络错误");
        });
    },
    async getTagName() {
      const url = "/governance/resiSearchTag/listResiSearchTags";
      let params = {
        pageSize: 99,
      };
      let { data, msg, code } = await requestPost(url, params);
      if (code == 0) {
        let showAddProduct = data.list.filter((item) => {
          return [this.formData.resiSearchTagId].includes(item.tagId);
        });
        if (this.formData.resiSearchTagId &&showAddProduct[0]) {
          this.resiSearchTagName = showAddProduct[0].tagName;
        } else {
          this.resiSearchTagName = "--";
        }
      } else {
        this.$message.error(msg);
      }
    },
    handleCancle() {
      this.resetData();
      this.$emit("handleClose");
    },

    handleOk() {
      this.showPersonList = false;
    },
    resetData() {
      this.formData = {};
    },
    async getServiceuserList() {
      
      const url = "/actual/base/serviceitem/listServerOrg";
      console.log(this.formData.commonServiceTypeId);
      if(this.formData.assignFlag!=1) return
      let params = {
        serviceTypeId: this.formData.commonServiceTypeId,
        serverOrgType:  this.formData['assignInfo'].serverOrgType,
        businessType: "common_service",
      };
      let { data, code, msg } = await requestPost(url, params);
      if (code == 0) {
        this.serviceOptiondList = data;
      } else if (code >= 8000) {
        this.$message.error(msg);
      }
    },
    // 开启加载动画
    startLoading() {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: "正在加载……", // 加载中需要显示的文字
        background: "rgba(0,0,0,.7)", // 背景颜色
      });
    },
    // 结束加载动画
    endLoading() {
      // clearTimeout(timer);
      if (loading) {
        loading.close();
      }
    },
  },
  computed: {
    dataRule() {
      return {
        serviceTimeStart: [
          { required: true, message: "服务时间不能为空", trigger: "blur" },
        ],
      };
    },
    serverOrgType(){
       let text = ''
       this.serviceOptions.forEach(item=>{
        if(item.value == this.formData.assignInfo.serverOrgType){
         text = item.label
        }
        
      })
      return text?text:'--'
    },
    serverOrgName(){
      let text = ''
      this.serviceOptiondList.forEach(item=>{
        if(item.id == this.formData.assignInfo.serverOrgId ){
          text = item.name
        }
      })
      return text?text:'--'
    }
    // resiSearchTagNameText(){
    //   let text = ""
    //   if(this.resiSearchTagName){
    //     text = this.resiSearchTagName
    //   }else {
    //     text = '--'
    //   }
    //   return text
    // },
  },
  props: {
    gxxqId: {
      type: String,
      required: true,
    },

    commonServiceTypeName: {
      type: String,
      default: "",
    },
    serviceTypesLevel1: {
      type: Array,
      default() {
        return [];
      },
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/modules/management/detail-main.scss";
.info-prop {
  margin-top: 29px;
}
.scroll-h {
  padding: 0 90px !important;
}
</style>