初始化
This commit is contained in:
hezhidong
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-button @click="newlyClick" type="danger" size="mini" icon="el-icon-delete"
|
||||
>删除所选信件</el-button
|
||||
>
|
||||
<el-button @click="resetClick" type="info" size="mini" icon="iconfont icon-biaodan"
|
||||
>重置</el-button
|
||||
>
|
||||
<el-button @click="searchClick" type="warning" size="mini" icon="el-icon-search"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-input
|
||||
v-if="false"
|
||||
v-model="searchData"
|
||||
size="mini"
|
||||
style="width: 20%"
|
||||
placeholder="请输入搜索的关键字"
|
||||
>
|
||||
</el-input>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "MailboxAllCommonHead",
|
||||
data() {
|
||||
return {
|
||||
searchData: "",
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
newlyClick() {
|
||||
// 在此处调用父组件传入的方法叫父组件做事情
|
||||
this.$emit("newly-data");
|
||||
},
|
||||
resetClick() {
|
||||
this.$emit("reset-data");
|
||||
},
|
||||
searchClick() {
|
||||
this.$emit("search-data", this.searchData);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<el-table
|
||||
border
|
||||
:header-cell-style="{
|
||||
background: '#f5f7fa',
|
||||
}"
|
||||
:data="tableData"
|
||||
style="width: 100%; margin-top: 20px"
|
||||
height="650"
|
||||
size="mini"
|
||||
>
|
||||
<el-table-column
|
||||
v-if="column.label !== 'userId'"
|
||||
v-for="(column, index) in tableColumns"
|
||||
:key="index"
|
||||
:prop="column.prop"
|
||||
:label="column.label"
|
||||
width="auto"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="column.type === 'text'"> {{ scope.row[column.prop] }}</span>
|
||||
<div v-else-if="column.type === 'image'">
|
||||
<img style="width: 200px; height: 100px" :src="scope.row[column.prop]" />
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column fixed="right" label="操作" width="160">
|
||||
<template slot-scope="scope">
|
||||
<el-popconfirm
|
||||
@confirm="handleDelete(scope.row)"
|
||||
:title="'确定要取消' + scope.row.userName"
|
||||
>
|
||||
<el-button
|
||||
slot="reference"
|
||||
style="margin-left: 10px; color: red"
|
||||
class="el-icon-delete"
|
||||
type="text"
|
||||
size="small"
|
||||
>取消负责人</el-button
|
||||
>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "PersonInCharge",
|
||||
props: {
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
deleteFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
// 删除事件
|
||||
handleDelete(row) {
|
||||
this.deleteFunc(row);
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
tableColumns() {
|
||||
// 处理传进来的列配置，返回符合 Element UI 表格要求的配置
|
||||
return this.columns.map((column) => {
|
||||
return {
|
||||
label: column.label,
|
||||
prop: column.prop,
|
||||
type: column.type,
|
||||
};
|
||||
});
|
||||
},
|
||||
tableData() {
|
||||
// 处理传进来的数据，返回符合 Element UI 表格要求的数据
|
||||
return this.data.map((rowData) => {
|
||||
let row = {};
|
||||
for (let column of this.columns) {
|
||||
row[column.prop] = rowData[column.prop];
|
||||
}
|
||||
return row;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<el-card class="box-card">
|
||||
<el-table
|
||||
border
|
||||
:header-cell-style="{
|
||||
background: '#f5f7fa',
|
||||
}"
|
||||
@selection-change="handleSelectionChange"
|
||||
:data="tableData"
|
||||
style="width: 100%; margin-top: 20px"
|
||||
height="650"
|
||||
size="mini"
|
||||
>
|
||||
<el-table-column type="selection" width="50"> </el-table-column>
|
||||
<el-table-column
|
||||
v-if="column.label !== 'id' && column.label !== 'image'"
|
||||
v-for="(column, index) in tableColumns"
|
||||
:key="index"
|
||||
:prop="column.prop"
|
||||
:label="column.label"
|
||||
width="auto"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="column.type === 'text'"> {{ scope.row[column.prop] }}</span>
|
||||
<div v-else-if="column.type === 'image'"></div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" width="160">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click="handleEdit(scope.row)"
|
||||
class="el-icon-edit"
|
||||
type="text"
|
||||
size="small"
|
||||
>处理回复</el-button
|
||||
>
|
||||
<el-popconfirm @confirm="handleDelete(scope.row)" :title="'确定要删除吗？'">
|
||||
<el-button
|
||||
slot="reference"
|
||||
style="margin-left: 10px; color: red"
|
||||
class="el-icon-delete"
|
||||
type="text"
|
||||
size="small"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "CommonTablesImg",
|
||||
props: {
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
deleteFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
editFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
selectFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
name: "CommonTables",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
// 删除事件
|
||||
handleDelete(row) {
|
||||
this.deleteFunc(row.id);
|
||||
},
|
||||
// 编辑事件
|
||||
handleEdit(row) {
|
||||
this.editFunc(row);
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
console.log(val);
|
||||
this.$emit("selectFunc", val);
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
tableColumns() {
|
||||
// 处理传进来的列配置，返回符合 Element UI 表格要求的配置
|
||||
return this.columns.map((column) => {
|
||||
return {
|
||||
label: column.label,
|
||||
prop: column.prop,
|
||||
type: column.type,
|
||||
};
|
||||
});
|
||||
},
|
||||
tableData() {
|
||||
// 处理传进来的数据，返回符合 Element UI 表格要求的数据
|
||||
return this.data.map((rowData) => {
|
||||
let row = {};
|
||||
for (let column of this.columns) {
|
||||
row[column.prop] = rowData[column.prop];
|
||||
}
|
||||
return row;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
Reference in New Issue
Block a user