soc_web/src/views/resumption/plan/distribute.vue

<template>
  <el-dialog
    title="选择下发机构状态"
    :visible.sync="isShow"
    class="g-dialog-select-safe-check"
    :close-on-click-modal="false"
    width="55%"
    top="10vh"
    append-to-body
  >
    <div class="el-dialog-div">
      <el-table :data="info.orgAndStatus" height="400px">
        <el-table-column type="index" label="序号" width="80"></el-table-column>
        <el-table-column prop="orgName" label="机构名称"></el-table-column>
        <el-table-column prop="status" label="计划状态">
          <template slot-scope="r">
            <el-switch
              v-model="r.row.status"
              active-text="启用"
              inactive-text="禁用"
              active-value="1"
              inactive-value="0"
              active-color="#008CD6"
              inactive-color="#ff4949"
            >
            </el-switch>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="onHide">关闭</el-button>
      <el-button type="primary" @click="onSubmit">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { listByTypes } from "@/api/system/org.js";

export default {
  components: {  },
  data() {
    return {
      isShow: false,
      info: this.emptyInfo(),
    };
  },
  computed: {},
  watch: {},
  props: {
    defaultSelect: {
      type: Array,
    },
    orgType: {
      type: String,
    },
  },
  methods: {
    show(plan) {
      this.isShow = true;
      this.info.id = plan.id;
      listByTypes({
        orgId: plan.planCreateOrgId,
        orgTypes: ["2", "3", "4"],
      }).then((r) => {
        this.info.orgAndStatus = r.data.map((d) => {
          return { orgId: d.id, orgName: d.name, status: "1" };
        });
      });
    },
    onHide() {
      this.info=this.emptyInfo();
      this.isShow = false;
    },
    onSubmit() {
      console.info(this.info)
      this.$emit("select", this.info);
      this.onHide();
    },
    emptyInfo() {
      return {
        id: null, //计划id
        orgAndStatus: [], //机构及状态
      };
    },
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
.el-dialog-div {
  overflow: auto;
}
</style>