soc_web/src/views/check/distribute.vue

<template>
  <el-dialog
    title="选择下发机构状态"
    :visible.sync="isShow"
    class="g-dialog-select-safe-check"
    :close-on-click-modal="false"
    width="700px"
    top="10vh"
    append-to-body
  >
    <div class="el-dialog-div">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-input
            size="mini"
            v-model="filterName"
            placeholder="按机构名称过滤"
            @input="filterbyOrgName"
            clearable
          ></el-input>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            size="mini"
            @click="handleAllStatus('1')"
            >全部启用</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            size="mini"
            @click="handleAllStatus('0')"
            >全部禁用</el-button
          >
        </el-col>
      </el-row>
      <el-table :data="tableData" 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="计划状态" width="150px">
          <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(),
      tableData: [],
      filterName: null,
    };
  },
  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: ["3"],
      }).then((r) => {
        this.info.orgAndStatus = r.data.map((d) => {
          return { orgId: d.id, orgName: d.shortName, status: "1" };
        });
        this.tableData = this.info.orgAndStatus;
      });
    },
    handleAllStatus(status) {
      this.tableData.forEach((element) => {
        element.status = status;
      });
    },
    filterbyOrgName(val) {
      if (!val || !val.trim()) {
        this.tableData = this.info.orgAndStatus;
      } else {
        this.tableData = this.info.orgAndStatus.filter(
          (o) => o.orgName.indexOf(val) >= 0
        );
      }
    },
    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>