通知管理

src/views/platform/notification_management/add_tag.vue

@@ -0,0 +1,99 @@
+<template>
+  <div>
+    <div class="title">{{ this.type }}</div>
+    <div class="tags">
+
+      <el-tag
+        :key="tag"
+        v-for="(tag,index) in addForm.dynamicTags"
+        closable
+        :disable-transitions="false"
+        @close="handleClose(index)">
+        {{ tag }}
+      </el-tag>
+
+      <!--  TODO:要换成自动补全输入框-->
+      <el-input
+        v-if="addForm.inputVisible"
+        v-model="addForm.inputValue"
+        ref="saveTagInput"
+        size="small"
+        @keyup.enter.native="handleInputConfirm"
+        @blur="handleInputConfirm"
+      />
+      <el-button v-else size="small" @click="showInput">增加{{ this.type }}</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'add_tag',
+  props: {
+    type: String
+  },
+  data() {
+    return {
+      addForm: {
+        inputVisible: false,
+        inputValue: '',
+        dynamicTags: [],
+        fileList: []
+      }
+    }
+  },
+  methods: {
+    showInput() {
+      this.addForm.inputVisible = true
+      this.$nextTick(_ => {
+        this.$refs.saveTagInput.$refs.input.focus()
+      })
+    },
+    handleInputConfirm() {
+      let inputValue = this.addForm.inputValue
+      if (inputValue === '') {
+        this.modal.msgWarning('不能为空')
+      }
+      if (this.addForm.dynamicTags.includes(inputValue)) {
+        this.modal.msgWarning('请勿重复添加')
+      } else {
+        this.addForm.dynamicTags.push(inputValue)
+        this.addForm.inputVisible = false
+        this.addForm.inputValue = ''
+      }
+
+    },
+    handleClose(index) {
+      this.addForm.dynamicTags.splice(index, 1)
+    }
+  },
+  watch: {
+    'addForm.dynamicTags': function(value) {
+      this.$emit('change:tags', value)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.tags {
+  display: flex;
+  align-items: center;
+
+  & > :nth-child(n+2) {
+    margin-left: 10px;
+  }
+
+}
+
+.title {
+  color: rgba(16, 16, 16, 1);
+  font-size: 14px;
+  text-align: left;
+  font-family: SourceHanSansSC-regular;
+}
+
+button {
+  margin-left: 10px;
+}
+</style>

src/views/platform/notification_management/index.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" inline>
+      <el-form-item>
+        <el-input placeholder="请输入通知标题"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-input placeholder="请输入序号"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-select v-model="queryParams.status" placeholder="全部" clearable style="width: 240px">
+          <el-option v-for="dict in dict.type.notification_status" :key="dict.value" :label="dict.label"
+                     :value="dict.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary">查询</el-button>
+        <el-button>重置</el-button>
+
+      </el-form-item>
+    </el-form>
+    <el-button type="primary" @click="open=true">新增</el-button>
+    <el-button>批量删除</el-button>
+    <el-table border :data="dataList" class="table">
+      <el-table-column type="index" label="序号" align="center"></el-table-column>
+      <el-table-column label="标题" align="center">通知标题</el-table-column>
+      <el-table-column label="封面" align="center"><img src="http://www.dummyimage.com/50x50"/></el-table-column>
+      <el-table-column label="发送对象" align="center">所有人</el-table-column>
+      <el-table-column label="发送数量" align="center">10000</el-table-column>
+      <el-table-column label="已读数量" align="center">10</el-table-column>
+      <el-table-column label="发送时间" align="center">2022-12-31 12:31</el-table-column>
+      <el-table-column label="状态" align="center">已发送</el-table-column>
+      <el-table-column label="操作" align="center">
+        <el-button type="text">编辑</el-button>
+        <el-button type="text">删除</el-button>
+      </el-table-column>
+
+
+    </el-table>
+    <el-dialog :visible.sync="open">
+      <el-form :model="addForm" inline label-width="100px" label-position="left">
+        <el-form-item label="标题">
+          <el-input placeholder="请输入"/>
+        </el-form-item>
+        <br/>
+        <el-form-item label="封面">
+          <el-upload :on-remove="onChange" :file-list="addForm.fileList" :on-change="onChange"
+                     list-type="picture" action="#" :auto-upload="false" :limit="1">
+            <i class="el-icon-plus" v-if="addForm.fileList.length === 0"></i>
+          </el-upload>
+        </el-form-item>
+        <br/>
+        <el-form-item label="发送对象">
+
+        </el-form-item>
+        <br/>
+        <el-form-item class="send">
+          <add-tag @change:tags="changeTags" type="普通用户"/>
+          <add-tag @change:tags="changeTags" type="厂商"/>
+          <add-tag @change:tags="changeTags" type="经销商"/>
+        </el-form-item>
+        <br/>
+        <el-form-item label="内容">
+          富文本编辑器
+        </el-form-item>
+      </el-form>
+      <div class="text-center">
+        <el-button type="primary" @click="save">保存</el-button>
+        <el-button>重置</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import AddTag from './add_tag'
+
+export default {
+  name: 'index',
+  dicts: ['notification_status'],
+  components: { AddTag },
+  data() {
+    return {
+      open: false,
+      addForm: {
+        fileList: []
+      },
+      dataList: [{}],
+      queryParams: {}
+    }
+  },
+  methods: {
+    save() {
+      this.$modal.msgSuccess('保存成功')
+      this.open = false
+    },
+    changeTags(tags) {
+
+    },
+    onChange(file, fileList) {
+      this.addForm.fileList = fileList
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.send {
+  width: 600px;
+  overflow-x: auto;
+  margin-left: 100px;
+  border-radius: 3px;
+  border: 1px solid rgba(190, 190, 190, 1);
+  padding: 10px;
+}
+
+.table {
+  margin-top: 10px;
+}
+</style>