src/views/baseSpecialAction/FormPage.vue

<template>
  <el-dialog
    title="行动详情"
    :close-on-click-modal="false"
    :visible.sync="visible"
    class="NCC-dialog NCC-dialog_center baseSpecialAction"
    lock-scroll
    width="60%"
    v-loading="loading"
  >
    <el-row :gutter="15" class="NCC-dialog-content">
      <h4>{{dataForm.title}}</h4>
      <div class="content" v-html="dataForm.content"></div>
      <div class="tag-group" v-if="isSHILevel">
        <span class="tag-group__title title-tag">传递区域:</span>
        <el-tag v-for="(v, i) in dataForm.communicationAreasList" :key="i">
          {{ v }}
        </el-tag>
      </div>
      <div class="tag-group" v-if="isSHILevel">
        <span class="tag-group__title title-tag">传达外协:</span>
        <el-tag v-for="(v, i) in dataForm.communicationOutsList" :key="i">
          {{ v }}
        </el-tag>
      </div>
      <div class="tag-group">
        <span class="tag-group__title title-tag">附件:</span>
        <NCC-UploadFz
          v-model="dataForm.annex"
          :fileSize="10"
          sizeUnit="MB"
          :limit="9"
          buttonText="点击上传"
          disabled
        >
        </NCC-UploadFz>
      </div>
      <div class="tag-group" v-if="dataForm.deadline">
        <span class="tag-group__title title-tag">截止时间:</span>
        {{ ncc.dateFormat(dataForm.deadline) || '--' }}
      </div>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="visible = false">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
import request from "@/utils/request";
import { getDictionaryDataSelector } from "@/api/systemData/dictionary";
import { previewDataInterface } from "@/api/systemData/dataInterface";
export default {
  components: {},
  props: [],
  data() {
    var validatecommunicationArea = (rule, value, callback) => {
        if (!this.dataForm.communicationOut.length && !value.length) {
          callback(new Error('传输区域和传输外协不能同时为空！'));
        } else {
          callback();
        }
      };
    var validatecommunicationOut = (rule, value, callback) => {
      if (!this.dataForm.communicationArea.length && !value.length) {
        callback(new Error('传输区域和传输外协不能同时为空！'));
      } else {
        callback();
      }
    };
    return {
      loading: false,
      visible: false,
      isDetail: false,
      editType: '', // 修改类型
      dataForm: {
        id: "",
        id: undefined,
        title: undefined,
        content: undefined,
        releaseTime: undefined,
        annex: [],
        communicationArea: [],
        communicationOut: [],
        state: undefined,
        creatorUserId: undefined,
        creatorTime: undefined,
        lastModifyUserId: undefined,
        lastModifyTime: undefined,
        deadline: undefined,
        relationId: undefined,
        communicationAreasList: [],
        communicationOutsList: [],
      },
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        content: [{ required: true, message: "请输入内容", trigger: "blur" }],
        communicationArea: [{validator: validatecommunicationArea, trigger: 'blur'}],
        communicationOut: [{validator: validatecommunicationOut, trigger: 'blur'}],
        relationId: [{ required: true, message: "请选择专项行动填报表单", trigger: "blur"}],
        deadline: [{ required: true, message: "请选择截止日期", trigger: "blur" }],
      },
      areaOptions: [],
      communicationOutOptions: [],
      BaseList:[],
      viewportHeight: 0,
      nestedPageUrl:"http://8.130.38.56:8043/old/#/onlineDev/webDesign/indexNew",
      dialogVisible: false,
      btnLoading: false,
      parentRow: {},
    };
  },
  computed: {
		isSHILevel() {
  	  // 判断角色是否为‘市级办公室’
  	  return this.$store.state.user.islader;
  	},
	},
  watch: {},
  created() {
    this.initAreaTypeList(); // 区县
    this.initCommunicationOutOptions(); // 外协
  },
  mounted() {},
  beforeDestroy() {
  },
  methods: {
    async initAreaTypeList() {
      let list = this.$store.state.meta.area;
      !list && (list = await this.$store.dispatch("getTypeListByCode", "area"));
      this.areaOptions = list;
    },
    async initCommunicationOutOptions() {
      let list = this.$store.state.meta.externalAssistanceList;
      !list && (list = await this.$store.dispatch("getTypeListByCode", "externalAssistance"));
      this.communicationOutOptions = list;
    },
    init(row, isDetail) {
      this.parentRow = row;
      this.dataForm.id = row ? row.id : '';
      this.visible = true;
      this.isDetail = isDetail || false;
      this.editType = row ? row.state : '';
      this.$nextTick(() => {
        if(this.dataForm.id) {
          this.loading = true;
          request({
            url: `/Extend/BaseSpecialAction/${this.dataForm.id} `,
            method: "GET",
          }).then((res) => {
            this.dataForm = res.data;
            let AreaList = [];
            res.data.communicationArea && res.data.communicationArea.forEach(v => {
              AreaList.push(this.areaOptions.find(item => item.id == v).fullName);
            });
            this.dataForm.communicationAreasList = AreaList;
            let OutList = [];
            res.data.communicationOut && res.data.communicationOut.forEach(v => {
              OutList.push(this.communicationOutOptions.find(item => item.id == v).fullName);
            });
            this.dataForm.communicationOutsList = OutList;
            this.dataForm.annex = res.data.annex == null ? [] : res.data.annex;
            this.loading = false;
          })
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.baseSpecialAction {
  h4 {
    text-align: center;
    line-height: 40px;
    border-bottom: 1px solid #ccc;
  }
  .content {
    padding: 20px;
    border-bottom: 1px solid #ccc;
  }
  .tag-group {
    margin: 10px 0;
  }
  .title-tag {
    margin: 5px 8px;
  }
  :deep(.el-tag) {
    margin: 4px 4px;
  }
}
</style>