<template>
|
<div>
|
<el-row :gutter="6">
|
<el-col :span="2">
|
<el-select
|
v-model="isSelect"
|
placeholder="请选择"
|
@change='toggleSelection(isSelect)'
|
>
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</el-col>
|
<el-col :span="2">
|
<el-button
|
class="btn-style"
|
@click="deleteUserInfo(tableData)"
|
:plain="true"
|
>删除</el-button>
|
</el-col>
|
<el-col :span="2">
|
<el-button class="btn-style">举报</el-button>
|
</el-col>
|
<el-col :span="2">
|
<el-select
|
v-model="isSelect"
|
placeholder="已读"
|
>
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</el-col>
|
<el-col :span="2">
|
<el-select
|
v-model="isSelect"
|
placeholder="移动至"
|
>
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</el-col>
|
<el-col :span="2">
|
<el-button class="btn-style">刷新</el-button>
|
</el-col>
|
</el-row>
|
<div></div>
|
<p class="p">有12信未读</p>
|
<el-table
|
ref="multipleTable"
|
:data="tableData"
|
tooltip-effect="dark"
|
style="width: 100%"
|
@selection-change="handleSelectionChange"
|
:show-header="false"
|
>
|
<el-table-column
|
type="selection"
|
width="55"
|
>
|
</el-table-column>
|
<el-table-column
|
label="发件人"
|
prop="name"
|
width="120"
|
style="display:flex"
|
>
|
<template slot-scope="scope">
|
<div class="flex">
|
<span v-if="scope.row.isRead">
|
<svg
|
t="1653636878260"
|
class="icon"
|
viewBox="0 0 1024 1024"
|
version="1.1"
|
xmlns="http://www.w3.org/2000/svg"
|
p-id="3051"
|
width="20"
|
height="20"
|
>
|
<path
|
d="M874.666667 375.189333V746.666667a64 64 0 0 1-64 64H213.333333a64 64 0 0 1-64-64V375.189333l64 54.250667V746.666667h597.333334V429.44l64-54.250667zM810.666667 213.333333a64.789333 64.789333 0 0 1 22.826666 4.181334 63.616 63.616 0 0 1 26.794667 19.413333 64.32 64.32 0 0 1 9.344 15.466667c2.773333 6.570667 4.48 13.696 4.906667 21.184L874.666667 277.333333v21.333334L553.536 572.586667a64 64 0 0 1-79.893333 2.538666l-3.178667-2.56L149.333333 298.666667v-21.333334a63.786667 63.786667 0 0 1 35.136-57.130666A63.872 63.872 0 0 1 213.333333 213.333333h597.333334z m-9.6 64h-578.133334L512 523.882667 801.066667 277.333333z"
|
p-id="3052"
|
></path>
|
</svg>
|
</span>
|
<span v-else>
|
<svg
|
t="1653637372549"
|
class="icon"
|
viewBox="0 0 1024 1024"
|
version="1.1"
|
xmlns="http://www.w3.org/2000/svg"
|
p-id="3206"
|
width="20"
|
height="20"
|
>
|
<path
|
d="M874.666667 375.189333V746.666667a64 64 0 0 1-64 64H213.333333a64 64 0 0 1-64-64V375.189333l266.090667 225.6a149.333333 149.333333 0 0 0 193.152 0L874.666667 375.189333zM810.666667 213.333333a64.789333 64.789333 0 0 1 22.826666 4.181334 63.616 63.616 0 0 1 26.794667 19.413333 64.32 64.32 0 0 1 9.344 15.466667c2.773333 6.570667 4.48 13.696 4.906667 21.184L874.666667 277.333333v21.333334L553.536 572.586667a64 64 0 0 1-79.893333 2.538666l-3.178667-2.56L149.333333 298.666667v-21.333334a63.786667 63.786667 0 0 1 35.136-57.130666A63.872 63.872 0 0 1 213.333333 213.333333h597.333334z"
|
p-id="3207"
|
></path>
|
</svg>
|
</span>
|
<span style="margin-left: 10px">{{ scope.row.name }}</span>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="isSignificance"
|
label="重要性"
|
width="120"
|
>
|
<!-- 旗帜 -->
|
<template slot-scope="scope">
|
<div @click="handleClick(scope.row)">
|
<span v-if="scope.row.isSignificance">
|
<svg
|
t="1653625549692"
|
class="icon"
|
viewBox="0 0 1024 1024"
|
version="1.1"
|
xmlns="http://www.w3.org/2000/svg"
|
p-id="10042"
|
width="20"
|
height="20"
|
>
|
<path
|
d="M824.32 178.176c-5.12 2.048-12.8 5.12-23.04 8.192-10.24 3.584-22.016 6.656-34.816 10.24s-28.672 6.144-47.104 8.192c-18.432 2.048-36.864 3.584-55.808 3.584-11.776 0-42.496-2.56-59.904-7.168-40.96-11.264-61.952-16.896-61.952-16.896l-59.392-19.968c-19.968-6.656-40.448-12.288-61.952-16.896-20.992-4.096-41.472-6.144-59.904-6.144-18.944 0-37.888 1.024-56.32 3.584-18.432 2.56-34.304 5.12-46.592 8.192-11.776 2.56-23.552 6.144-35.328 10.24-11.264 4.096-18.944 6.656-22.016 8.192-3.584 1.536-6.144 2.56-7.68 3.584v673.792c0 9.216 3.072 17.408 9.728 24.064 6.656 6.656 14.336 9.728 23.552 9.728 9.216 0 17.408-3.072 23.552-9.728 6.656-6.656 9.728-14.336 9.728-24.064V624.64c33.792-7.68 67.584-11.264 100.864-11.264 28.672 0.512 50.176 4.608 59.904 7.168l61.952 16.896 59.392 19.456c20.48 6.656 40.96 12.288 61.952 16.896 21.504 4.608 41.472 7.168 59.904 7.168 18.944 0 37.888-1.024 56.32-3.584 18.944-2.56 34.304-5.12 46.592-8.192 11.776-2.56 23.552-6.144 35.328-10.24 11.264-4.096 18.944-6.656 22.016-8.192 3.584-1.536 6.144-2.56 7.68-3.584V175.104l-6.656 3.072z"
|
p-id="10043"
|
fill="#d81e06"
|
></path>
|
</svg>
|
</span>
|
<span v-else>
|
<svg
|
t="1653629871679"
|
class="icon"
|
viewBox="0 0 1024 1024"
|
version="1.1"
|
xmlns="http://www.w3.org/2000/svg"
|
p-id="10738"
|
width="20"
|
height="20"
|
>
|
<path
|
d="M360.56779688 208.62508741c-34.36511523 0-67.99940039 4.49782689-100.94584596 13.48810643v333.59686817c33.63428515-6.63120457 67.31156078-10.00054371 100.94584596-10.00054443 24.86970288 0 49.77702271 2.80509595 74.67359472 8.53888501 24.89119848 5.7284148 53.1786045 13.8212788 84.93745191 24.38069213 4.05180591 1.46165942 11.60729444 4.04643164 22.72020458 7.75431739 11.15052563 3.81536083 19.28100586 6.51835596 24.45055103 8.20033837 5.21253491 1.68735668 12.77339771 3.933583 22.76856787 6.85690186 9.9736753 2.91794459 18.36209473 4.94384789 25.10614795 6.28728443 6.7548003 1.34881079 14.55210816 2.58477222 23.26832642 3.70788575 8.74846094 1.12848706 17.07776929 1.68735668 25.00942065 1.68735668 34.34899389 0 68.00477393-4.37960401 100.94584596-13.36988354v-333.7097168a512.70387084 512.70387084 0 0 1-100.94584596 10.11339306c-24.9180669 0-49.81463891-2.92331885-74.67359472-8.65173364-24.87507714-5.73378833-53.1893523-13.8212788-84.91595705-24.38069214a3468.10913109 3468.10913109 0 0 1-22.7846892-7.75431738 3037.58598023 3037.58598023 0 0 0-24.46129882-8.09286401c-5.16954517-1.68198315-12.74115503-3.92820948-22.71483032-6.8515276-9.9736753-2.92331885-18.34597412-5.05669653-25.1115215-6.40550732-6.77092164-1.23596215-14.52523901-2.47192359-23.26832641-3.70788573a196.76513648 196.76513648 0 0 0-25.00404711-1.68735669zM360.56779688 141.21142578c18.55555005 0 38.5835066 2.36444921 59.95490039 6.96437695 21.36064599 4.72352416 41.97971484 10.33909033 61.79272191 16.85744556l59.39065651 19.77539087s20.62444238 5.61556616 61.81959106 16.85207202c41.17365308 11.23650586 61.17474121 13.59558082 59.92803125 6.96437623 18.93708569 0 37.60548438-1.12311352 56.00519604-3.36933984 18.43195362-2.24622632 34.09642749-5.05132227 47.09552247-8.42603566 12.99372143-3.36933983 24.55802613-6.63120457 34.81650977-9.99517016 10.25311011-3.37471337 17.92682152-6.17980933 23.00501294-8.43678344l7.36203393-3.36396631V646.82732324c-1.75184132 0.89741553-4.38497827 2.13337768-7.88866089 3.59503711-3.53055176 1.46165942-10.93557617 4.15928028-22.22044604 8.20033911a361.85203222 361.85203222 0 0 1-35.35925807 10.22624097c-12.2790127 2.92331885-27.75003199 5.62093969-46.43992552 8.09286402a428.23393481 428.23393481 0 0 1-56.37061037 3.70788574c-18.56092358 0-38.56201172-2.36444921-59.93340551-7.08259912a580.568927 580.568927 0 0 1-61.81959106-16.85207203l-59.39065651-19.66791576-61.79809545-16.95954713c-41.18977441-11.12365723-61.17474121-13.48810643-59.94952685-6.96975048-33.47844678 0-67.13422681 3.82073437-100.94584596 11.34935449v224.60652221c0 9.32882543-3.28873316 17.30346656-9.88769507 23.82182251-6.57209277 6.63120457-14.50374415 9.88769508-23.79495409 9.8876958-9.2858357 0-17.21748706-3.25649121-23.79495338-9.8876958C195.55076001 866.38252319 192.26202685 858.40788208 192.26202685 849.07905664V175.033792c1.75184132-0.90278978 4.40647314-2.13875122 7.91015577-3.60041065 3.50905689-1.45628588 10.91408129-4.26675536 22.19895117-8.20033838a361.85203222 361.85203222 0 0 1 35.35925806-10.22624169c12.30588183-2.91794459 27.79302172-5.61556616 46.41843066-8.08748976A429.46989625 429.46989625 0 0 1 360.546302 141.21142578h0.02149488z"
|
p-id="10739"
|
></path>
|
</svg>
|
</span>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="headline"
|
show-overflow-tooltip
|
>
|
</el-table-column>
|
<el-table-column
|
prop="time"
|
label="发件时间"
|
show-overflow-tooltip
|
align="right"
|
>
|
</el-table-column>
|
</el-table>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
options: [
|
{ lable: 1, value: "全选" },
|
{ lable: 2, value: "全不选" },
|
],
|
isSelect: "",
|
// 表格
|
|
deleteIds: [],
|
tableData: [
|
{
|
id: 1,
|
// 是否选择
|
isCondition: false,
|
// 重要性
|
isSignificance: false,
|
// 发件人
|
name: "王小虎",
|
headline: "有关放假注意事项的通知",
|
// 发件时间
|
time: "今天",
|
// 是否已读
|
isRead: false,
|
},
|
{
|
id: 2,
|
// 是否选择
|
isCondition: false,
|
// 重要性
|
isSignificance: false,
|
// 发件人
|
name: "张三",
|
headline: "有关放假注意事项的通知",
|
// 发件时间
|
time: "昨天",
|
// 是否已读
|
isRead: true,
|
},
|
],
|
multipleSelection: [],
|
};
|
},
|
methods: {
|
// 旗帜变换
|
handleClick(row) {
|
this.tableData.filter((item) => {
|
if (item.id == row.id) item.isSignificance = !row.isSignificance;
|
});
|
},
|
// 判断是否全选
|
toggleSelection(rows) {
|
if (rows == "全选") {
|
this.tableData.forEach((row) => {
|
this.$refs.multipleTable.toggleRowSelection(row);
|
});
|
} else if (rows == "全不选") {
|
this.$refs.multipleTable.clearSelection();
|
}
|
},
|
// 获取选中的行数
|
handleSelectionChange(val) {
|
this.multipleSelection = val;
|
},
|
// 删除
|
deleteUserInfo() {
|
// 判断是否选择邮件
|
if (!this.multipleSelection.length) {
|
this.$message({
|
message: "未选择任何邮件",
|
type: "warning",
|
});
|
return;
|
}
|
// 获取要删除的id
|
for (var i = 0; i < this.multipleSelection.length; i++) {
|
var j = i;
|
var id = this.multipleSelection[j].id;
|
this.deleteIds.push(id);
|
}
|
},
|
},
|
|
// created() {
|
// //使用双向绑定给下拉列表设置一个默认值
|
// this.isSelect = this.options[0].value;
|
// },
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.flex {
|
display: flex;
|
}
|
.bg-purple {
|
background: #d3dce6;
|
}
|
|
.btn-style {
|
width: 100%;
|
}
|
.p {
|
border-bottom: 1px solid rgb(189, 188, 188);
|
padding-bottom: 10px;
|
}
|
ul {
|
list-style: none;
|
padding: 0;
|
margin: 0;
|
}
|
</style>
|
