epmet-oper-gov/src/views/modules/communityParty/article/cpts/offline.vue

<template>
  <div>
    <div class="dialog-h-content scroll-h">
      <el-form
        ref="ref_form"
        :inline="true"
        :model="fmData"
        :rules="dataRule"
        class="form"
      >
        <el-form-item
          label="文章名称"
          prop="title"
          label-width="150px"
          style="display: block"
        >
          <div style="width: 610px">
            {{ fmData.title || "--" }}
          </div>
        </el-form-item>

        <el-form-item
          label="下线网格	"
          prop="gridIdList"
          label-width="150px"
          style="display: block"
        >
          <el-cascader
            v-model="fmData.gridIdList"
            placeholder="请选择"
            :options="gridOptions"
            :props="{
              multiple: true,
              value: 'value',
              label: 'label',
              children: 'children',
              checkStrictly: false,
              emitPath: false,
            }"
            :show-all-levels="false"
            size="small"
            clearable
            class="item-select"
            style="width: 500px"
            @change="handleChangeCascader"
          >
          </el-cascader>
        </el-form-item>
      </el-form>
    </div>

    <div class="div_btn resi-btns">
      <el-button size="small" @click="handleCancle">取 消</el-button>
      <el-button
        type="primary"
        size="small"
        :disabled="btnDisable"
        @click="handleComfirm"
        >确 定</el-button
      >
    </div>
  </div>
</template>

<script>
import { requestPost } from "@/js/dai/request";

export default {
  props: {},

  data() {
    return {
      btnDisable: false,

      fmData: {
        articleId: "",
        title: "",
        gridIdList: [],
      },

      gridOptions: [],
    };
  },
  components: {},
  computed: {
    dataRule() {
      return {
        gridIdList: [
          { required: true, message: "下线网格不能为空", trigger: "blur" },
        ],
      };
    },
  },
  watch: {},

  async mounted() {},

  methods: {
    handleChangeCascader(e) {
      console.log(e);
    },
    async initForm({ articleId, title }) {
      this.fmData.articleId = articleId;
      this.fmData.title = title;
      this.fmData.gridIdList = [];
      this.gridOptions = [];
      this.getGridOpitons(articleId);
    },

    async getGridOpitons(articleId) {
      const url = "/gov/voice/article/publishgridlist";
      const params = {
        articleId,
      };

      const { data, code, msg } = await requestPost(url, params);
      if (code === 0) {
        function poll(list) {
          return list.map((item) => {
            return {
              label: item.agencyName,
              value: item.agencyId,
              type: "agency",
              children: [
                ...poll(item.subAgencyGridList),
                ...item.gridList.map((grid) => ({
                  label: grid.gridName,
                  value: grid.gridId,
                  type: "grid",
                })),
              ],
            };
          });
        }
        let gridOptions = poll([data.agencyGridList]);
        console.log(gridOptions);
        this.gridOptions = gridOptions;
      } else {
        this.$message.error(msg);
      }
    },

    async handleComfirm() {
      this.btnDisable = true;
      setTimeout(() => {
        this.btnDisable = false;
      }, 5000);
      this.$refs["ref_form"].validate((valid, messageObj) => {
        if (!valid) {
          app.util.validateRule(messageObj);
          this.btnDisable = false;
        } else {
          this.submit();
        }
      });
    },

    async submit() {
      let url = "/gov/voice/article/offlinearticle";

      let params = { ...this.fmData };

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

      if (code === 0) {
        this.$message({
          type: "success",
          message: "操作成功",
        });
        this.$emit("afterOffline");
        this.btnDisable = false;
      } else {
        this.btnDisable = false;
        this.$message.error(msg);
      }
    },

    handleCancle() {
      this.$emit("close");
    },
  },
};
</script>

<style lang="scss" scoped>
.item_width_1 {
  width: 500px;
}
.item_width_2 {
  width: 400px;
}
.item_width_3 {
  margin-left: 10px;
  width: 200px;
}
.item_width_4 {
  width: 200px;
}

.div_map {
  margin-top: 10px;
}

.div_btn {
  // display: flex;
  // justify-content: flex-end;
}
.el-tabs {
  margin: 0 20px;
}
.el-upload__tip {
  color: rgb(155, 155, 155);
  margin: 0;
}
.form {
  margin-top: 30px;
}

.attachement-list {
}
</style>