epmet-work-pc-chengyang/src/views/modules/visual/measure/dialogInfo.vue

<template>
  <div class="m-pop">
    <div class="wrap">
      <cpt-card>
        <div class="title">
          <img src="@/assets/img/shuju/title-tip.png" />
          <span>需求详情</span>
        </div>

        <div class="btn-close"
             @click="handleClose">
          <img src="@/assets/img/shuju/people/close.png" />
        </div>
        <div class="list-title">需求内容</div>
        <div class="list-wr">
          <div class="list">
            <div class="item-desc">
              <!-- <span class="item-field">所属网格：</span> -->
              <span>{{ info.content }}</span>
            </div>
            <div class="item">
              <span class="item-field">所属网格：</span>
              <span>{{ info.gridName }}</span>
            </div>
            <div class="item">
              <span class="item-field">需求类型：</span>
              <span>{{ info.categoryName }}</span>
            </div>
            <div class="item">
              <span class="item-field">需求状态：</span>
              <span>{{ info.statusName }}</span>
            </div>
            <div class="item">
              <span class="item-field">上报类型：</span>
              <span>{{ info.reportTypeName }}</span>
            </div>
            <div class="item">
              <span class="item-field">上 报 人：</span>
              <span>{{ info.reportUserName }}</span>
            </div>
            <div class="item">
              <span class="item-field">上报人联系方式：</span>
              <span>{{ info.reportUserMobile }}</span>
            </div>
            <div class="item">
              <span class="item-field">上报时间：</span>
              <span>{{ info.reportTime }}</span>
            </div>
            <div class="item">
              <span class="item-field">服务时间：</span>
              <span>{{ info.wantServiceTime }}</span>
            </div>
          </div>
          <div v-if="info.status!=='pending'"
               class="list">
            <div class="item"
                 v-if="info.serviceShowFlag">
              <span class="item-field ">服务方：</span>
              <span>{{ info.serviceShowName }}</span>
            </div>
            <template v-if="info.status == 'finished'">
              <div class="item">
                <span class="item-field">实际服务时间：</span>
                <span v-if="info.serviceStartTime">{{ info.serviceStartTime }} 至 <br />
                  {{ info.serviceEndTime }}</span>
              </div>
              <div class="item">
                <span class="item-field">完成情况：</span>
                <span>{{ info.finishResult == "resolved" ? "已解决" : "未解决" }}
                  <br />
                  {{ info.finishDesc }}</span>
              </div>
              <div class="item">
                <span class="item-field">评价：</span>
                <span>
                  <el-rate :value="info.score"
                           disabled></el-rate>
                </span>
              </div>
            </template>

          </div>

          <div v-if="info.status==='pending'"
               class="list">
            <div class="item">
              <span class="item-field item-filed-height ">服务方：</span>
              <div class="single-select sel-service">
                <el-select v-model="form.serviceType"
                           class="input-width-small"
                           placeholder="请选择"
                           clearable
                           style="margin-right:10px;"
                           @change="handleServiceChange('add', $event)">
                  <el-option v-for="item in serviceOptions"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
                -
                <el-select v-model="form.serverId"
                           class="input-width-middle"
                           filterable
                           placeholder="请选择"
                           style="margin-left:10px;"
                           clearable>
                  <el-option v-for="item in serviceOptiondList"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
        </div>

        <div class="div_btn">
          <div class="item_btn"
               @click="handleClose()">关闭</div>
          <div class="item_btn mgl"
               v-if="info.status==='pending'"
               @click="handleSubmit()">确认</div>
        </div>

        <div v-if="false"
             class="tabs">
          <div class="tab-btn">
            <img src="@/assets/img/shuju/people/arrow-double-left.png" />
          </div>
          <div class="tab z-on">研判分析</div>
          <div class="tab-btn">
            <img src="@/assets/img/shuju/people/arrow-double-right.png" />
          </div>
        </div>

        <div v-if="false"
             style="padding: 30px 0; display: flex; justify-content: center;">
          <analyse v-if="!loading"
                   :single-list="demandList"
                   :single-title="'需求上报'"
                   :more-title="'事件上报'"
                   :user-list="userLists"
                   :user-name="info.demandUserName"
                   :has-event="false"
                   :more-list="eventList"
                   @project="handleToProject"
                   @user="handleToUser" />
        </div>
      </cpt-card>
    </div>
  </div>
</template>

<script>
import cptCard from "@/views/modules/visual/cpts/card";
import analyse from "../cpts/analyse.vue";
import { requestPost } from "@/js/dai/request";

export default {
  name: "dialogInfo",
  props: {
    userId: {
      type: String,
      default: "",
    },
    demandId: String,
    queryOrigin: String,
    // info: Object,
  },

  components: {
    cptCard,
    analyse,
  },

  data () {
    return {
      loading: false,
      info: {},
      demandList: [
        // {
        //   categoryName: '辨明服务',
        //   categoryCode: '1',
        //   showItem: false,
        //   projectList: [
        //     {
        //       title: '不知道写了什么哈哈哈',
        //       status: 'closed',
        //       projectId: '1'
        //     }
        //    
        //   ]
        // },

      ],
      userLists: [
        // {
        //   homeId: "1",
        //   icUserId: "1",
        //   icUserName: "沾上干",
        // }
      ],
      userName: "王亚男哈",
      eventList: [
        // {
        //   categoryName: "辨明服务",
        //   categoryCode: "1",
        //   projectList: [
        //     {
        //       title: "不知道写了什么哈哈哈",
        //       status: "closed",
        //       projectId: "1",
        //     },

        //   ],
        // },

      ],

      serviceOptions: [],
      serviceOptiondList: [],

      form: {
        serviceType: '',
        serverId: '',
      }
    };
  },

  async mounted () {

    await this.getInfo(this.demandId);
    await this.getServiceOption()
  },

  methods: {
    handleClose () {
      this.$emit("close");
    },
    async getInfo (demandId) {
      // const url = "/gov/org/customeragency/staffinagencylist";
      const url = "/governance/userdemand/demandDetail";
      let params = {
        demandRecId: demandId,
      };
      const { data, code, msg } = await requestPost(url, params);
      if (code === 0) {
        // console.log('data-org----dict', data)
        this.info = data;
        this.getAnalyse(demandId);
      } else {
        this.$message.error(msg);
      }
    },
    async getServiceOption () {
      // const url = "/gov/org/customeragency/staffinagencylist";
      const url = "/sys/dict/data/dictlist";
      let params = {
        dictType: 'user_demand_service_type',
      };
      const { data, code, msg } = await requestPost(url, params);
      if (code === 0) {
        this.serviceOptions = data;
      } else {
        this.$message.error(msg);
      }
    },

    handleServiceChange (type, val) {
      if (val === "social_org") {
        if (type === "add") this.getServiceuserList(val, "add_demand");
        else this.getServiceuserList(val, "query_demand");
      } else this.getServiceuserList(val, "");
    },

    async getServiceuserList (serviceType, query) {
      if (!serviceType) return false;
      const { demandUserId } = this.form;
      const params = {
        serviceName: "",
        serviceType: serviceType,
        queryPurpose: query,
      };
      await this.$http
        .post("/governance/userdemand/servicelist", params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.serviceOptiondList = res.data.filter(
              (item) => item.value != demandUserId
            );
          }
        })
        .catch(() => {
          return this.$message.error("网络错误");
        });
    },



    async handleSubmit () {
      if (!this.form.serviceType || !this.form.serverId) {
        this.$message.info("请选择服务方");
        return false
      }
      const _form = {
        demandRecId: this.demandId,
        serviceType: this.form.serviceType,
        serverId: this.form.serverId,
      };
      await this.$http
        .post("/governance/userdemand/assign", _form)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.$emit("handleAssignOk");
            this.handleClose();


            this.$message.success("指派成功");
          }
        })
        .catch(() => {
          return this.$message.error("网络错误");
        });
      this.btnLoading = false;
    },

    async getAnalyse (demandId) {
      // const url = "/gov/org/customeragency/staffinagencylist";
      this.loading = true;
      const url = "/governance/userdemand/demand-research-analysis";
      let params = {
        firstCategoryCode: this.info.firstCategoryCode,
        demandRecId: demandId,
        icResiUserId: this.info.icResiUserId,
        epmetUserIdList: [this.info.epmetUserId],
        queryOrigin: this.queryOrigin,
      };
      const { data, code, msg } = await requestPost(url, params);
      if (code === 0) {
        console.log("data-org----a", data);
        this.userLists = data.houseUserList.map((item) => {
          return {
            ...item,
            icUserId: item.icResiUserId,
          };
        });
        this.demandList = data.demandData.map((item) => {
          return {
            ...item,
            showItem: true,
            categoryName: item.firstCategoryName,
            categoryCode: item.firstCategoryCode,
            projectList: item.demandList.map((n) => {
              return {
                ...n,
                title: n.content,
                status: n.status,
                statusName: n.statusName,
                projectId: n.demandRecId,
              };
            }),
          };
        });
        console.log("demandList-dd", this.demandList);
      } else {
        this.$message.error(msg);
      }
      this.loading = false;
    },
    handleToProject (val) {
      console.log("val---v", val);
      this.getInfo(val.projectId);
    },
    handleToUser (val) {
      console.log("val-uuu", val);

      this.$router.push({
        path: `/main-shuju/visual-basicinfo-people/${val.icUserId}`,
      });
    },
  },
};
</script>

<style
  lang="scss"
  src="@/assets/scss/modules/visual/people.scss"
  scoped
></style>
<style lang="scss" scoped>
@import "@/assets/scss/modules/visual/a_customize.scss";

.m-pop {
  color: #fff;
  .wrap {
    .list {
      display: block;
      width: 50%;
      .item {
        display: flex;
        width: 100%;
        box-sizing: border-box;
        margin-top: 0;
        margin-bottom: 15px;
        font-size: 16px;
        cursor: pointer;

        .item-field {
          flex-shrink: 0;
        }

        .item-filed-height {
          line-height: 30px;
        }
      }
      .item-desc {
        font-size: 16px;
        color: #fff;
        margin-bottom: 10px;
        line-height: 24px;
      }
    }
  }
  .list-title {
    width: 100%;
    box-sizing: border-box;
    padding: 20px 0 10px 62px;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
  }
}
.list-wr {
  display: flex;
  padding: 0 32px;
}

.sel-service {
  display: flex;
  justify-content: flex-start;
}

.div_btn {
  display: flex;
  justify-content: center;

  .item_btn {
    font-size: 14px;
    padding: 8px 16px;
    cursor: pointer;

    border: 1px dashed #0c81fe;
    border-radius: 6px;
    background-color: #0c81fe;
  }

  .mgl {
    margin-left: 20px;
  }
}
</style>