ShibeiWorkPlatform_Frontend/src/views/modules/shequ/cpts/xuqiu-info.vue

<template>
  <div>
    <div>
      <el-form
        ref="ref_form"
        :inline="false"
        :model="dataForm"
        :disabled="formType === 'detail'"
        class="form"
      >
        <el-form-item label="状态：" label-width="150px" style="display: block">
          <span>{{ dataForm.statusName }}</span>
        </el-form-item>

        <el-form-item
          label="所属网格："
          label-width="150px"
          style="display: block"
        >
          <span>{{ dataForm.gridName }}</span>
        </el-form-item>

        <el-form-item
          label="需求类型："
          label-width="150px"
          style="display: block"
        >
          <span>{{ dataForm.categoryName }}</span>
        </el-form-item>

        <el-form-item
          label="需求内容："
          label-width="150px"
          style="display: block"
        >
          <span>{{ dataForm.content }}</span>
        </el-form-item>

        <el-form-item
          label="上报类型："
          label-width="150px"
          style="display: block"
        >
          <span>{{ dataForm.reportTypeName }}</span>
        </el-form-item>

        <el-form-item label="上报人：" label-width="150px" style="display: block">
          <span>{{ dataForm.reportUserName }}</span>
        </el-form-item>

        <el-form-item
          label="上报时间："
          label-width="150px"
          style="display: block"
        >
          <span>{{ dataForm.reportTime }}</span>
        </el-form-item>

        <el-form-item label="需求人：" label-width="150px" style="display: block">
          <span>{{ dataForm.demandUserName }}</span>
        </el-form-item>

        <el-form-item
          v-if="dataForm.serviceShowName"
          label="服务方："
          label-width="150px"
          style="display: block"
        >
          <span>{{ dataForm.serviceShowName }}</span>
        </el-form-item>

        <el-form-item
          v-if="dataForm.wantServiceTime"
          label="服务时间："
          label-width="150px"
          style="display: block"
        >
          <span>{{ dataForm.wantServiceTime }}</span>
        </el-form-item>

        <el-form-item
          v-if="
            dataForm.serviceStartTime &&
            dataForm.serviceEndTime &&
            dataForm.status == 'finished'
          "
          label="实际服务时间："
          label-width="150px"
          style="display: block"
        >
          <span
            >{{ dataForm.serviceStartTime }}至{{
              dataForm.serviceEndTime
            }}</span
          >
        </el-form-item>

        <el-form-item
          v-if="dataForm.finishResult && dataForm.status == 'finished'"
          label="完成情况："
          label-width="150px"
          style="display: block"
        >
          <span>{{
            dataForm.finishResult == "resolved" ? "已解决" : "未解决"
          }}</span>
        </el-form-item>

        <el-form-item
          v-if="dataForm.score && dataForm.status == 'finished'"
          label="评价得分："
          label-width="150px"
          style="display: block"
        >
          <span>{{ dataForm.score }}</span>
        </el-form-item>

        <el-form-item
          v-if="dataForm.finishDesc && dataForm.status == 'finished'"
          label="评价备注："
          label-width="150px"
          style="display: block"
        >
          <span>{{ dataForm.finishDesc }}</span>
        </el-form-item>

        <el-form-item
          v-if="dataForm.cancelTime && dataForm.status == 'canceled'"
          label="取消时间："
          label-width="150px"
          style="display: block"
        >
          <span>{{ dataForm.cancelTime }}</span>
        </el-form-item>
      </el-form>
    </div>
    <div class="div_btn">
      <el-button @click="handleCancle">关闭</el-button>
    </div>
  </div>
</template>

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

let loading; // 加载动画
export default {
  data() {
    return {
      formType: "detail", //表单操作类型 add新增，edit编辑，detail详情
      dataForm: {},
    };
  },
  components: {},
  mounted() {},

  methods: {
    async initForm(type, row) {
      this.$refs.ref_form.resetFields();

      this.formType = type;
      if (row) {
        this.dataForm = JSON.parse(JSON.stringify(row));
      }
    },

    handleCancle() {
      this.$emit("dialogCancle");
      this.resetData();
    },

    resetData() {
      this.dataForm = {};
    },
    // 开启加载动画
    startLoading() {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: "正在加载……", // 加载中需要显示的文字
        background: "rgba(0,0,0,.7)", // 背景颜色
      });
    },
    // 结束加载动画
    endLoading() {
      // clearTimeout(timer);
      if (loading) {
        loading.close();
      }
    },
  },
  computed: {},
  props: {},
};
</script>
<style lang="scss" scoped>
.item_width_1 {
  width: 500px;
}
.item_width_2 {
  width: 400px;
}
.item_width_3 {
  margin-left: 10px;
  width: 200px;
}

.div_btn {
  display: flex;
  justify-content: center;
}
.el-tabs {
  margin: 0 20px;
}
.el-upload__tip {
  color: rgb(155, 155, 155);
  margin: 0;
}
.form {
  margin-top: 30px;
  height: 60vh;
  overflow-y: auto;
}
</style>
<style>
.el-dialog__body {
  padding: 0 10px 20px !important;
}
</style>