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

<template>
  <div class="g-main">
    <div class="m-search">
      <el-form
        :inline="true"
        :model="formData"
        ref="ref_searchform"
        :label-width="'100px'"
      >
        <el-form-item prop="serviceType" label="需求类别">
          <el-select
            class="u-item-width-daterange"
            v-model.trim="formData.serviceTypeLevel1Id"
            placeholder="请选择"
            size="small"
            clearable
          >
            <el-option
              v-for="item in serviceTypesLevel1"
              @click.native="handleChangeServiceTypeLevel1"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <span class="u-data-tag"> -- </span>
        </el-form-item>

        <el-form-item prop="serviceType">
          <el-select
            class="u-item-width-daterange"
            v-model.trim="formData.commonServiceTypeId"
            placeholder="请选择"
            size="small"
            clearable
          >
            <el-option
              v-for="item in serviceTypesLevel2"
              @click.native=""
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="需求标题" prop="title">
          <el-input
            v-model="formData.title"
            class="u-item-width-normal"
            size="small"
            clearable
            placeholder="请输入"
          >
          </el-input>
        </el-form-item>

        <el-form-item label="需求状态" prop="assignFlag">
          <el-select
            class="u-item-width-normal"
            v-model="formData.assignFlag"
            placeholder="全部"
            size="small"
            clearable
          >
            <el-option
              v-for="item in statusArray"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="服务时间" prop="timeStart">
          <el-date-picker
            v-model="formData.timeStart"
            class="u-item-width-daterange"
            size="small"
            type="date"
            value-format="yyyy-MM-dd"
            value="yyyy-MM-dd"
            placeholder="开始时间"
          >
          </el-date-picker>
          <span class="u-data-tag">至</span>
          <el-date-picker
            v-model="formData.timeEnd"
            class="u-item-width-daterange u-data-tag"
            size="small"
            type="date"
            value-format="yyyy-MM-dd"
            value="yyyy-MM-dd"
            placeholder="结束时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-row type="flex">
          <el-col :span="24" align="right">
            <el-button
              style="margin-left: 30px"
              size="small"
              type="primary "
              @click="handleSearch"
              >查询</el-button
            >
            <el-button
              style="margin-left: 10px"
              is-plain
              class="diy-button--white el-button--default"
              size="small"
              @click="resetSearch"
              >重置</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="m-table">
      <div class="div_btn">
        <el-button
          style="height: 32px"
          size="small"
          @click="handleAdd({}, 'add')"
          type="primary"
          icon="el-icon-plus"
        >
          添加需求</el-button
        >
      </div>
      <el-table
        ref="gxxq_table"
        border
        :data="tableData"
        v-loading="tableLoading"
        style="width: 100%"
        :height="tableHeight"
        @select-all="selectAll"
        @selection-change="handelSelection"
      >
        <el-table-column
          type="selection"
          fixed="left"
          align="center"
          width="50"
        />
        <el-table-column
          label="需求类别"
          prop="commonServiceTypeName"
          :reserve-selection="true"
          fixed="left"
          align="center"
        />
        <el-table-column
          label="需求标题"
          prop="title"
          fixed="left"
          align="center"
        />

        <el-table-column
          label="指派服务"
          prop="assignFlag"
          fixed="left"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.assignFlag == "0" ? "未指派" : "已指派" }}
          </template>
        </el-table-column>
        <el-table-column
          label="需求发布时间"
          prop="createdTime"
          fixed="left"
          align="center"
        />
        <el-table-column fixed="right" label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.row)" size="small" type="text"
              >查看</el-button
            >
            <el-button
              style="margin-right: 10px"
              @click="handleAdd(scope.row, 'edit')"
              size="small"
              type="text"
              >编辑</el-button
            >
            <template>
              <el-popconfirm
                title="删除之后无法回复，确认删除？"
                @onConfirm="handleDel(scope.row)"
              >
                <el-button size="small" type="text" slot="reference"
                  >删除</el-button
                >
              </el-popconfirm>
            </template>
          </template>
        </el-table-column>
      </el-table>

      <div class="div-flex">
        <div class="m-page">
          <el-button @click="deleteBatch" size="small" style="margin-top: 15px;">
                批量删除
        </el-button>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="pageNo"
            :page-sizes="[20, 50, 100, 200]"
            :page-size="pageSize"
            layout="sizes, prev, pager, next, total"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog
      :visible.sync="formShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="formTitle"
      destroy-on-close
      width="900px"
      top="5vh"
      class="dialog-h"
      @closed="diaClose"
    >
      <add-form
        v-if="formShow"
        ref="gxxq_form"
        :row-obj="rowObj"
        :formType="formType"
        @handleClose="addFormCancle"
        @handleComfirm="addFormOk"
      ></add-form>
    </el-dialog>
    <el-dialog
      :visible.sync="formEditShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="'需求详情'"
      destroy-on-close
      width="900px"
      top="5vh"
      class="dialog-h"
      @closed="diaClose"
    >
      <detail-form
        v-if="formEditShow"
        ref="gxxq_form"
        :commonServiceTypeName="commonServiceTypeName"
        :formType="formType"
        @handleClose="addFormCancle"
        @handleComfirm="addFormOk"
        :gxxq-id="gxxqId"
      ></detail-form>
    </el-dialog>
  </div>
</template>

<script>
import { requestPost, requestGet } from "@/js/dai/request";
import { mapGetters } from "vuex";
import addForm from "./addForm.vue";
import detailForm from "./detailForm.vue";
export default {
  data() {
    return {
      // 公共服务分类
      serviceTypesLevel1: [],
      serviceTypesLevel2: [],
      commonServiceTypeName: "",
      formType: "add",
      formEditShow: false,
      gxxqId: "",
      formData: {
        title: "",
        serviceTypeLevel1Id: "",
        commonServiceTypeId: "",
        timeStart: "",
        timeEnd: "",
        assignFlag: "",
      },
      statusArray: [
        {
          value: 1,
          label: "已指派服务",
        },
        {
          value: 0,
          label: "未指派服务",
        },
      ],
      selection: [],
      selAllFlag: false,
      tableData: [],
      pageNo: 1,
      pageSize: 20,
      tableLoading: true,
      total: 0,
      searchH: 170,
      formShow: false,
      formTitle: "",
      rowObj: {},
    };
  },
  created() {},
  components: { addForm, detailForm },
  methods: {
    async getCommonDemandList() {
      const url = "/governance/commonDemand/list";
      let params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        ...this.formData,
      };
      let { data, msg, code } = await requestGet(url, params);
      this.tableLoading = false;
      if (code == 0) {
        this.tableData = data.list;
        this.total = data.total;
      } else {
        this.$message.error(msg);
      }
    },
    addFormCancle() {
      this.formShow = false;
      this.formEditShow = false
    },
    handelSelection(row){
        this.selection = row
    },
    addFormOk() {
      this.formShow = false;
      this.formEditShow = false
      this.getCommonDemandList();
    },
    selectAll(selection) {
      this.selection = selection;
      if (selection.length > 0) {
        this.selAllFlag = true;
      } else {
        this.selAllFlag = false;
      }
    },
    handleAdd(row, type) {
      if (type == "add") {
        this.formTitle = "添加需求";
        this.formShow = true;
        this.formType = "add";
      } else {
        this.formTitle = "修改需求";
        this.formShow = true;
        console.log(row);
        this.rowObj = row;
        this.$nextTick(() => {
          this.$refs.gxxq_form.initForm(type, row);
        });
      }
    },
    handleEdit(row) {
      this.gxxqId = row.id;
      this.commonServiceTypeName = row.commonServiceTypeName;
      this.formEditShow = true;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getCommonDemandList();
    },
    async handleDel(row) {
      const url = `/governance/commonDemand/delete/`;
      let { code, msg } = await requestPost(url, [row.id]);
      if (code == 0) {
        this.$message.success("删除成功");
      } else if (code >= 8000) {
        this.$message.error(msg);
      }
      this.getCommonDemandList();
    },
    handleSearch() {
      console.log(this.formData);
      this.getCommonDemandList();
    },
    resetSearch() {
      this.formData = {
        title: "",
        serviceTypeLevel1Id: "",
        commonServiceTypeId: "",
        timeStart: "",
        timeEnd: "",
        assignFlag: "",
      };

      this.pageNo = 1;
      this.getCommonDemandList();
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      this.getCommonDemandList();
    },
    diaClose() {
      this.formShow = false;
    },
    // checkSelectable(row, index) {
    //     console.log(index);
    //   return row.id;
    // },
    async deleteresiBatch() {
      if (this.selection.length === 0)
        return this.$message.error("请选择之后进行操作");
      let ids = this.selection.map((item) => item.id);
      this.$http
        .post("/governance/commonDemand/delete/", ids)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.$message.success("删除成功");
            this.getCommonDemandList();
          }
        })
        .catch((err) => {
          console.log("row4", err);
          return this.$message.error("网络错误");
        });
    },
    deleteBatch() {
			if (this.selection.length > 0) {
				this.$confirm("删除之后无法恢复，确认删除？", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				})
					.then(() => {
						this.deleteresiBatch();
					})
					.catch((err) => {
						if (err == "cancel") {
						}
					});
			} else {
				this.$message.warning("请先选择要删除的需求");
			}
		},
    // 获取服务组织
    async getDictOptions() {
      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);
      }

      this.$http
        .get("/governance/commonServiceType/selectList/0")
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.serviceTypesLevel1 = res.data;
          }
        })
        .catch(() => {
          return this.$message.error("网络错误");
        });
    },
    // 服务类型下拉框选中事件
    handleChangeServiceTypeLevel1() {
      this.formData.commonServiceTypeId = "";
      this.$http
        .get(
          "/governance/commonServiceType/selectList/" +
            this.formData.serviceTypeLevel1Id
        )
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.serviceTypesLevel2 = res.data;
          }
        })
        .catch(() => {
          return this.$message.error("网络错误");
        });
    },
  },
  mounted() {
    this.getCommonDemandList();
    this.getDictOptions();
  },
  computed: {
    ...mapGetters(["clientHeight", "iframeHeight"]),
    tableHeight() {
      const h = this.clientHeight - this.searchH - 275 + this.iframeHeight;
      const _h = this.clientHeight - 275 - this.searchH;
      return this.$store.state.inIframe ? h : _h;
    },
  },
  watch: {},
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/modules/management/list-main.scss";
.div_btn {
  margin-bottom: 12px;
}
</style>