|
|
@@ -1,41 +1,107 @@
|
|
|
<template>
|
|
|
- <div class="Ad">
|
|
|
- <h1>群体档案</h1>
|
|
|
+ <div class="GroupRecord">
|
|
|
+ <header id="header">
|
|
|
+ <el-row type="flex">
|
|
|
+ <el-col :span="4">
|
|
|
+ <el-select v-model="value" placeholder="请选择">
|
|
|
+ <el-option label="item.label" value="item.value"></el-option>
|
|
|
+ <el-option label="item.label" value="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <el-select v-model="value" placeholder="请选择">
|
|
|
+ <el-option label="item.label" value="item.value"></el-option>
|
|
|
+ <el-option label="item.label" value="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <el-select v-model="value" placeholder="请选择">
|
|
|
+ <el-option label="item.label" value="item.value"></el-option>
|
|
|
+ <el-option label="item.label" value="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <el-button type="primary">查找</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </header>
|
|
|
+ <section>
|
|
|
+ <article class="table">
|
|
|
+ <el-table :data="tableData" border style="width: 100%">
|
|
|
+ <el-table-column prop="date" sortable label="日期" width="180"></el-table-column>
|
|
|
+ <el-table-column prop="name" label="姓名" width="180"></el-table-column>
|
|
|
+ <el-table-column prop="address" label="地址"></el-table-column>
|
|
|
+ <el-table-column label="操作" width="150">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
|
|
|
+ <el-popconfirm title="是否删除此设备的信息？" @onConfirm="del(scope.row)">
|
|
|
+ <el-button slot="reference" type="text" size="small">删除</el-button>
|
|
|
+ </el-popconfirm>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-row type="flex" justify="end">
|
|
|
+ <el-col :span="8" class="pagination">
|
|
|
+ <el-pagination
|
|
|
+ @current-change="pageChange"
|
|
|
+ background
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :total="1000"
|
|
|
+ ></el-pagination>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </article>
|
|
|
+ </section>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { mapActions } from "vuex";
|
|
|
-
|
|
|
export default {
|
|
|
- name: "Ad",
|
|
|
data() {
|
|
|
- return {};
|
|
|
- },
|
|
|
- created() {
|
|
|
- // this.get()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- ...mapActions(["fetch"]),
|
|
|
- get() {
|
|
|
- console.log('999')
|
|
|
- this.fetch({
|
|
|
- api: "core/memberInfo/list",
|
|
|
- method: "GET",
|
|
|
- data: {
|
|
|
- tableId: 1,
|
|
|
- breedingId: 1
|
|
|
+ return {
|
|
|
+ value: "",
|
|
|
+ tableData: [
|
|
|
+ {
|
|
|
+ date: "2016-05-02",
|
|
|
+ name: "王小虎",
|
|
|
+ address: "上海市普陀区金沙江路 1518 弄"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: "2016-05-04",
|
|
|
+ name: "王小虎",
|
|
|
+ address: "上海市普陀区金沙江路 1517 弄"
|
|
|
},
|
|
|
- success: res => {
|
|
|
- console.log(res);
|
|
|
+ {
|
|
|
+ date: "2016-05-01",
|
|
|
+ name: "王小虎",
|
|
|
+ address: "上海市普陀区金沙江路 1519 弄"
|
|
|
},
|
|
|
- fail: err => {
|
|
|
- console.log(err);
|
|
|
- if (err.errMsg) this.$message.error(err.errMsg);
|
|
|
- else this.$message.error("服务器发生异常");
|
|
|
+ {
|
|
|
+ date: "2016-05-03",
|
|
|
+ name: "王小虎",
|
|
|
+ address: "上海市普陀区金沙江路 1516 弄"
|
|
|
}
|
|
|
- });
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ methods: {
|
|
|
+ edit(row) {},
|
|
|
+ del(row) {},
|
|
|
+ pageChange(p) {
|
|
|
+ console.log(p)
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+#header {
|
|
|
+ margin-bottom: 15px;
|
|
|
+}
|
|
|
+.table {
|
|
|
+ .pagination {
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
linan