dvcp_v2_webapp/packages/3.0.0/AppMeetingChinaunion/components/meetingSet.vue

<template>
  <section class="meetingSet">
    <ai-detail>
      <ai-title slot="title" title="三会一课设置" isShowBack @onBackClick="$parent.goBack()" isShowBottomBorder/>
      <template #content>
        <div class="tab-tips">
          <span class="el-icon-warning"/>
          <span class="text">未按照“会议要求”开展三会一课的情况下，支部负责人主要用于接收上级领导的催办消息。</span>
        </div>
        <ai-card title="基本信息">
          <template #content>
            <ai-wrapper>
              <ai-info-item label="党组织" :value="partyName"/>
            </ai-wrapper>

          </template>
        </ai-card>
        <ai-card title="支部负责人">
          <template #right>
            <ai-party-member :instance="instance" v-model="peopleList"
                             :action="'/app/appparty/list?partyOrgId='+partyId" @change="confirmAddUser"
                             dialogTitle="添加支部负责人" customCliker>
              <el-button type="text" icon="iconfont iconAdd">添加人员</el-button>
            </ai-party-member>
          </template>
          <template #content>
            <el-table
                :key='0'
                :data="tableDataUser"
                style="width: 100%"
                border
                header-cell-class-name="table-header"
                empty-text="支部负责人信息为空，点击标题右侧添加按钮进行添加"
            >
              <el-table-column type="index" label="序号" align="center" width="240"></el-table-column>
              <el-table-column prop="partyName" label="姓名" align="center"></el-table-column>
              <el-table-column label="操作" align="center">
                <div slot-scope="{row}">
                  <span @click="deleteUser(row)"
                        class="iconfont iconDelete icon-color89B"
                        title="删除"
                        style="cursor: pointer;"
                  />
                </div>
              </el-table-column>
            </el-table>
          </template>
        </ai-card>
        <ai-card title="三会一课要求">
          <template #content>
            <el-table
                :key='1'
                :data="tableDataRequirement"
                style="width: 100%"
                border
                header-cell-class-name="table-header"
                align="center"
                empty-text="三会一课要求为空"
            >
              <el-table-column prop="meetingClassification" label="类型">
                <div slot-scope="{row}">{{ dict.getLabel('meetingClassification', row.meetingClassification) || '-' }}
                </div>
              </el-table-column>
              <el-table-column prop="type" label="要求">
                <div slot-scope="{row}">{{ dict.getLabel('appThreeMeetingCTCType', row.type) || '-' }}</div>
              </el-table-column>
            </el-table>
          </template>
        </ai-card>
      </template>
    </ai-detail>
  </section>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "meetingSet",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
    detail: Object,
    partyId: String,
    partyName: String,
  },
  computed: {
    ...mapState(["user"])
  },
  data() {
    return {
      navList: [
        {name: "支部负责人", id: "1"},
        {name: "会议要求", id: "2"}
      ],
      navId: "1",
      tableDataUser: [],
      searchMsg: '',
      peopleList: [],
      chooseUser: [],
      tableDataRequirement: [],
    };
  },
  mounted() {
    console.log(this.user)
    this.dict.load('appThreeMeetingCTCType', 'meetingClassification')
    this.getPartyList()
    this.getRequirement()
  },
  methods: {
    navClick(item) {
      this.navId = item.id;
    },
    //获取支部负责人table
    getPartyList() {
      this.instance.post(`/app/appthreemeetingpartyconfig/list?organizationId=${this.partyId}`).then(res => {
        if (res.code == 0) {
          this.tableDataUser = res.data.records
          this.peopleList = res.data.records.map((item) => {
            return {
              partyOrgId: item.organizationId,
              id: item.partyId,
              name: item.partyName,
              phone: item.phone
            }
          })
          // this.$forceUpdate()
        }
      })
    },
    //获取会议要求列表
    getRequirement() {
      this.instance.post(`/app/appthreemeetingclassificationconfig/list`).then(res => {
        if (res.code == 0) {
          this.tableDataRequirement = res.data.records
        }
      })
    },
    //确认添加支部人员
    confirmAddUser(v) {
      let userList = v.map((item) => {
        return {
          organizationId: item.partyOrgId,
          partyId: item.id,
          partyName: item.name,
          phone: item.phone
        }
      })

      this.instance.post(`/app/appthreemeetingpartyconfig/addOrUpdate`, userList, null).then(res => {
        if (res.code == 0) {
          this.$message({message: '添加成功', type: 'success'});
          this.getPartyList()
        }
      })
    },
    //删除支部负责人
    deleteUser(item) {
      this.$confirm('是否删除该支部负责人?', '', {
        type: 'error'
      }).then(() => {
        this.instance.post(`/app/appthreemeetingpartyconfig/delete?ids=${item.id}`).then(res => {
          if (res.code == 0) {
            this.$message({message: '删除成功', type: 'success'});
            this.getPartyList()
          }
        })
      })
    }
  }
};
</script>
<style scoped lang="scss">
::v-deep .right_title .iconfont {
  margin-right: 0 !important;
}

.mask {
  .operation {
    overflow: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 64px;
    line-height: 64px;
    display: flex;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    background-color: #f3f6f9;
    box-shadow: inset 0 1px 0 0 #eeeeee;

    button {
      width: 92px;
      height: 32px;
      padding: 0 !important;
    }

    .delete-btn {
      background-color: #fff;
    }
  }

  .content {
    padding: 0 16px 100px;

    .search-info {
      line-height: 44px;
      border-bottom: 1px solid #D0D4DC;

      span {
        display: inline-block;
        width: 120px;
        line-height: 20px;
        padding-right: 8px;
      }

      .el-input {
        width: 160px;
        height: 28px;
        vertical-align: top;
      }

      ::v-deep .el-input__inner {
        height: 28px !important;
      }
    }

    .user-list {
      padding: 8px 0;
      height: 200px;
      overflow-y: scroll;

      .user-item {
        line-height: 24px;
        cursor: pointer;

        .iconfont {
          margin-right: 4px;
        }
      }

      .active {
        color: #5088FF;
      }
    }
  }
}

.content-left {
  width: 160px;
  height: 100%;
  // float:left;
  position: absolute;
  left: -224px;

  .content-left-nav {
    width: 158px;
    background-color: #ffffff;
    border-radius: 4px;
    border: solid 1px #eeeeee;
    margin-top: 56px;
    overflow: hidden;

    li {
      height: 48px;
      line-height: 48px;
      padding-left: 24px;
      font-size: 14px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0;
      color: #666666;
      cursor: pointer;
      border-left: 3px solid transparent;

      &:hover {
        border-left: 3px solid #5088ff;
      }

      a {
        display: block;
      }
    }

    .navActive {
      border-left: 3px solid #5088ff;
      color: #5088ff;
    }
  }
}

.tab-tips {
  display: inline-block;
  width: 790px;
  height: 32px;
  line-height: 30px;
  background-color: #fff3e8;
  border-radius: 4px;
  border: 1px solid #f82;
  box-sizing: border-box;
  color: #f82;
  margin: 16px 0;

  .el-icon-warning {
    font-size: 16px;
    margin: 0 8px;
  }

  .text {
    font-size: 12px;
  }
}
</style>