sl-sfy-safety/src/views/message/sysnotion-config/SysnotionConfig.vue

<template>
  <div class="sysnotion-config">
    <div class="tophead">
      <div><img src="@/views/message/reportmessage/img/rollback.png" />返回</div>
      <span>新建系统通知</span>
    </div>
    <div class="content">
      <div class="left">
        <el-form
          ref="ruleFormRef"
          style="max-width: 600px"
          label-width="auto"
          :model="ruleForm"
          :label-position="labelPosition"
          class="el-form-outer"
        >
          <el-form-item
            label="消息标题"
            prop="title"
            :rules="[{ required: true, message: '请输入消息标题' }]"
          >
            <el-input
              v-model="ruleForm.title"
              placeholder="请输入20字以内的消息标题"
              maxlength="20"
              show-word-limit
            />
          </el-form-item>
          <el-form-item label="消息内容" prop="content" class="transprant">
            <el-input
              v-model="ruleForm.content"
              placeholder="请输入500字以内的消息内容"
              type="textarea"
              :rows="5"
              maxlength="500"
              show-word-limit
            />
          </el-form-item>
          <el-form-item
            label="推送渠道"
            prop="channel"
            :rules="[{ required: true, message: '请选择推送渠道' }]"
          >
            <el-checkbox
              v-model="ruleForm.channel"
              v-for="item in pushChannelName"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />
          </el-form-item>
          <PushObject
            ref="childFromRef"
            :recipientType="ruleForm.object.recipientType"
            :userGroupList="ruleForm.object.userGroupList"
            :customUserList="ruleForm.object.customUserList"
          />
          <el-form-item label="操作人" prop="operator" class="transprant">
            <el-input v-model="ruleForm.operator" :disabled="true" />
          </el-form-item>
        </el-form>
        <div class="btns">
          <el-button>重置</el-button>
          <el-button>暂存</el-button>
          <el-button type="primary" @click="submitForm()">确定</el-button>
        </div>
      </div>
      <div class="right">
        <div class="top-head">
          实时效果
          <el-tooltip
            effect="dark"
            content="实例样式仅供参考，最终展示以线上为准"
            placement="top-start"
          >
            <img src="@/assets/icons/info.png" />
          </el-tooltip>
        </div>
        <div class="tabs">
          <el-tabs v-model="activeName">
            <el-tab-pane label="平台侧" name="platform" class="platform">
              <div class="tabs-content">
                <div class="title">
                  <div class="vertical"></div>
                  <span>卡片页:</span>
                </div>
                <div class="card">
                  <div class="card-title"
                    >系统公告<a>去查看<img src="@/assets/icons/arrow.png" /></a
                  ></div>
                  <div class="card-content">
                    <p style="font-size: 12px; color: #969799">2024年6月25日 16:45:06</p>
                    <p style="margin-top: 5px; font-size: 13px; color: #646566">
                      {{ ruleForm.title || title }}
                    </p>
                  </div>
                </div>
              </div>
              <div class="tabs-content">
                <div class="title">
                  <div class="vertical"></div>
                  <span>详情页:</span>
                </div>
                <div class="info">
                  <div class="info-title"> {{ ruleForm.title || title }} </div>
                  <div class="info-content">
                    <span>{{ ruleForm.content || content }}</span>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="蓝信侧" name="lanxin" class="lanxin">
              <div class="tabs-content">
                <div class="title">
                  <div class="vertical"></div>
                  <span>卡片页:</span>
                </div>
                <div class="card">
                  <div class="card-title">系统公告</div>
                  <div class="card-content">
                    <p style="margin-top: 5px; font-size: 13px; color: #646566">
                      {{ ruleForm.title || title }}
                    </p>
                  </div>
                  <img src="@/assets/icons/link_icon.png" />
                </div>
              </div>
              <div class="tabs-content">
                <div class="title">
                  <div class="vertical"></div>
                  <span>详情页:</span>
                </div>
                <div class="info">
                  <div class="info-title"> {{ ruleForm.title || title }} </div>
                  <div class="info-content">
                    <span>{{ ruleForm.content || content }}</span>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { storeToRefs } from 'pinia';
import { useUserStore } from '@/store/modules/user';
import { pushChannelName } from '../constant';
import type { FormProps } from 'element-plus';
import PushObject from '../components/PushObject.vue';
import type { FormInstance } from 'element-plus';
const title = ref<string>('本系统进行了重大升级，请查看详细内容');
const content = ref<string>(
  '尊敬的用户：\n    我们计划于2024年9月5日进行平台系统升级，以提升服务性能和用户体验，升级期间，平台将暂时不可用，预计停机时间为4小时，从上午2:00至6:00。请您提前做好相关安排，以避免不便，感谢您的理解与支持。如有疑问，请联系客服支持团队。\n敬请留意。\n天眼团队',
);
const ruleFormRef = ref<FormInstance>();
const childFromRef = ref();
const validate = ref<boolean>();
const useUser = useUserStore();
const { info } = storeToRefs(useUser);
const labelPosition = ref<FormProps['labelPosition']>('left');
interface UserList {
  id: string;
  name: string;
  userId: number;
}
interface ObjectFrom {
  recipientType?: number;
  userGroupList?: number[];
  customUserList?: UserList[];
}
interface RuleForm {
  title: string;
  content: string;
  channel: number[];
  object: ObjectFrom;
  operator: string;
}
const ruleForm = reactive<RuleForm>({
  title: '',
  content: '',
  channel: [],
  object: {},
  operator: info.value.nickname,
});
const activeName = ref('platform');
const submitForm = () => {
  console.log(childFromRef.value!.getChildValue())
  childFromRef.value!.submitForm().then((res) => {
    validate.value = res;
  });
  ruleFormRef.value!.validate((valid) => {
    if (validate.value && valid) {
      console.log(ruleForm);
    } else {
      console.log('下发失败');
    }
  });
};
</script>

<style lang="scss" scoped>
.sysnotion-config {
  position: relative;
  height: calc(100vh - 64px - 18px);
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box !important;
  .tophead {
    display: flex;
    gap: 20px;
    width: 100%;
    height: 50px;
    padding: 16px 0 14px 21px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    div {
      display: flex;
      align-items: center;
      font-weight: 400;
      font-size: 14px;
      color: #303133;
      line-height: 22px;
      cursor: pointer;
      img {
        margin-right: 4px;
      }
    }
  }
  .content {
    display: flex;
    width: 100%;
    height: calc(100vh - 64px - 18px - 50px);
    padding: 0 30px 0 0;
    .left {
      flex: 1;
      position: relative;
      padding: 21px;
      border-right: 1px solid rgba(0, 0, 0, 0.06);
      .el-form-outer {
        display: flex;
        flex-direction: column;
        gap: 32px;
      }
      .transprant {
        :deep(.el-form-item__label::before) {
          content: '**';
          opacity: 0;
        }
      }
      .btns {
        position: absolute;
        right: 27px;
        bottom: 21px;
      }
    }
    .right {
      width: 380px;
      height: 100%;
      padding: 20px 9px 0 20px;
      .top-head {
        display: flex;
        gap: 7px;
        align-items: center;
        width: 100%;
        height: 22px;
        font-weight: 600;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.85);
        line-height: 22px;
        img {
          cursor: pointer;
        }
      }
      .tabs {
        margin-top: 14px;
        :deep(.el-tabs__header) {
          margin: 0 0 22px;
        }
        :deep(.is-top) {
          font-weight: 550;
          font-size: 14px;
          line-height: 22px;
        }
        :deep(.el-tabs__nav-wrap::after) {
          height: 0px;
        }
        .platform {
          display: flex;
          flex-direction: column;
          gap: 24px;
          .tabs-content {
            width: 100%;
            height: auto;
            max-height: calc(100vh - 450px);
            .title {
              display: flex;
              gap: 18px;
              width: 100%;
              height: 31px;
              .vertical {
                width: 4px;
                height: 12px;
                background: #1777ff;
                border-radius: 3px;
              }
              span {
                font-weight: 400;
                font-size: 14px;
                color: #303133;
                line-height: 20px;
              }
            }
            .card {
              width: 100%;
              height: 124px;
              padding: 10px 14px 0 12px;
              background: #ffffff;
              border-radius: 4px;
              border: 1px solid rgba(0, 0, 0, 0.06);
              .card-title {
                display: flex;
                justify-content: space-between;
                font-weight: 600;
                font-size: 15px;
                color: #646566;
                line-height: 20px;
                a {
                  display: flex;
                  gap: 8px;
                  cursor: default;
                }
              }
              .card-content {
                margin-top: 15px;
                font-weight: 400;
                line-height: 20px;
              }
            }
            .info {
              width: 100%;
              max-height: calc(100vh - 450px - 32px);
              background: #ffffff;
              border-radius: 4px;
              border: 1px solid rgba(0, 0, 0, 0.06);
              .info-title {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 41px;
                font-weight: 600;
                font-size: 14px;
                color: rgba(0, 0, 0, 0.85);
                line-height: 22px;
                border-bottom: 1px solid rgba(0, 0, 0, 0.06);
              }
              .info-content {
                width: 100%;
                max-height: calc(100vh - 450px - 32px - 41px);
                overflow-y: auto;
                padding: 12px 7px 12px 12px;
                font-weight: 400;
                font-size: 14px;
                color: #646566;
                line-height: 22px;
                word-wrap: break-word;
                white-space: pre-wrap;
              }
            }
          }
        }
        .lanxin {
          display: flex;
          flex-direction: column;
          gap: 24px;
          .tabs-content {
            width: 100%;
            height: auto;
            max-height: calc(100vh - 400px);
            .title {
              display: flex;
              gap: 18px;
              width: 100%;
              height: 31px;
              .vertical {
                width: 4px;
                height: 12px;
                background: #1777ff;
                border-radius: 3px;
              }
              span {
                font-weight: 400;
                font-size: 14px;
                color: #303133;
                line-height: 20px;
              }
            }
            .card {
              width: 100%;
              height: 79px;
              padding: 10px 14px 0 12px;
              background: #ffffff;
              border-radius: 4px;
              border: 1px solid rgba(0, 0, 0, 0.06);
              position: relative;
              .card-title {
                display: flex;
                justify-content: space-between;
                font-weight: 600;
                font-size: 15px;
                color: #646566;
                line-height: 20px;
                a {
                  display: flex;
                  gap: 8px;
                }
              }
              .card-content {
                margin-top: 15px;
                font-weight: 400;
                line-height: 20px;
              }
              img {
                position: absolute;
                top: 10px;
                right: 17px;
              }
            }
            .info {
              width: 100%;
              max-height: calc(100vh - 400px - 32px);
              background: #ffffff;
              border-radius: 4px;
              border: 1px solid rgba(0, 0, 0, 0.06);
              .info-title {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 41px;
                font-weight: 600;
                font-size: 14px;
                color: rgba(0, 0, 0, 0.85);
                line-height: 22px;
                border-bottom: 1px solid rgba(0, 0, 0, 0.06);
              }
              .info-content {
                width: 100%;
                max-height: calc(100vh - 400px - 32px - 41px);
                overflow-y: auto;
                padding: 12px 7px 12px 12px;
                font-weight: 400;
                font-size: 14px;
                color: #646566;
                line-height: 22px;
                word-wrap: break-word;
                white-space: pre-wrap;
              }
            }
          }
        }
      }
    }
  }
}
</style>