client-base-v5/src/customer/NotificationPanel.vue

<template>
  <div>
    <div class="row box">
      <div class="col-md-12">
        <button
          class="btn btn-primary btn-xs"
          @click="addUser"
        >
          添加接收人
        </button>
      </div>
    </div>
    <div class="row box">
      <div class="col-md-12">
        <div class="table-box">
          <table class="table table-condensed table-bordered table-user">
            <thead>
              <tr>
                <th>名称</th>
                <th>编号</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr
                v-for="(item,index) in users"
                :key="item.id"
              >
                <td>{{ item.data.name.displayValue[0] }}</td>
                <td>{{ item.data.no.displayValue[0] }}</td>
                <td>
                  <button
                    class="btn btn-danger btn-xs"
                    @click="removeUser(index)"
                  >
                    删除
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="row box">
      <div class="col-md-2">
        主题：
      </div>
      <div class="col-md-10">
        <input
          v-model="theme"
          autocomplete="off"
          type="text"
          class="form-control"
        />
      </div>
    </div>
    <div class="row">
      <div class="col-md-2">
        正文：
      </div>
      <div class="col-md-10">
        <textarea
          v-model="content"
          class="form-control"
          rows="5"
        />
      </div>
    </div>
    <Modal
      v-model:show="modal"
      :full="true"
    >
      <InfoWindow
        ref="info"
        :info-window-no="userinfoWindowNo"
        :where-clause-source="whereClauseSource"
        :is-search-widget="true"
        @data-selected="dataSelected"
      />
      <template #header>
        用户查询
      </template>
    </Modal>
  </div>
</template>
<script>
import Common from '../common/Common.js';

import UserStorageResource from '../api/base/UserStorageResource.js';
import { Notify, Uuid } from 'pc-component-v3';

export default {
  components: {
    
  },
  data: function () {
    return {
      userinfoWindowNo: 11531,
      whereClauseSource: {
        customerDataDimensions:[{
          fieldName: 'client.id',
          dataDimensionTypeNo: '202201191757',
          defaultDataDimensionTypeValueNo: '1',
        }],
      },
      users: [],
      theme: '',
      content: '',
      modal: false,
    };
  },
  mounted: function () {
    var _self = this;

    UserStorageResource.uniqueByKey('notification-users').then(usersStr => {
      // if(usersStr.errorCode != 0) {
      //   Notify.error('提示', usersStr.errorMessage, false);
      //   return;
      // }
      if (usersStr.data != null && usersStr.data != '') {
        _self.users = JSON.parse(usersStr.data);
      }
    }, errorData => {
      Common.processException(errorData);
    });
  },
  methods: {
    // 添加消息接收人
    addUser: function () {
      var _self = this;
      _self.modal = true;
      
    },
    // 删除用户
    removeUser: function (index) {
      this.users.splice(index, 1);
      this.restoreUsers();
    },
    // 接收人用户选择后
    dataSelected: function (modelData) {
      var _self = this;
      this.modal = false;
      var flag = true;
      _self.users.forEach(function (item) {
        if (item.id == modelData.id) {
          flag = false;
        }
      });
      if (flag) {
        _self.users.push(modelData);
        _self.restoreUsers();
      }
    },
    // 缓存用户数据到localStorage
    restoreUsers: function () {
      var _self = this;
      let userStorageDtos = [
        {
          key: 'notification-users',
          value: JSON.stringify(_self.users),
        },
      ];
      UserStorageResource.uploadUserStorage(userStorageDtos).then(successData => {
        console.log('#notification-users上传成功');
      }, errorData => {
        Common.processException(errorData);
      });
    },
    // 获取通知(供外部调用)
    getNotification: function () {
      var _self = this;
      var userIds = [];
      _self.users.forEach(function (item) {
        userIds.push(item.id);
      });
      var notification = {
        userIds: userIds,
        theme: _self.theme,
        content: _self.content,
      };
      return notification;
    },
  },
};
</script>
<style scoped>
.table-user th,
td {
    text-align: center;
}
.box {
    margin-bottom: 10px;
}
.table-box {
    height: 150px;
    overflow-y: auto;
    border: 1px solid #dfdbdb;
}
</style>