123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137 |
- <template>
- <div class="app-container">
- <!-- 搜索 -->
- <el-form inline label-width="100px" size="mini">
- <el-form-item label="项目名称:">
- <el-input v-model="form.name" placeholder="请输入项目名称" />
- </el-form-item>
- <el-form-item label="当前状态:">
- <el-select v-model="form.status" placeholder="请选择当前状态">
- <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
- </el-select>
- </el-form-item>
- <el-form-item>
- <el-button type="primary" icon="el-icon-search" @click="getSearch">搜索</el-button>
- <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
- <el-button type="primary" icon="el-icon-plus" plain @click="getDetail()">新增</el-button>
- </el-form-item>
- </el-form>
- <!-- 列表 -->
- <el-table :data="tableData">
- <el-table-column prop="name" label="项目名称" align="center" />
- <el-table-column label="图标" align="center" width="150px">
- <template slot-scope="scope">
- <el-image :src="scope.row.pic" />
- </template>
- </el-table-column>
- <el-table-column prop="status" label="当前状态" align="center" :formatter="statusFormatter" />
- <el-table-column label="操作" align="center">
- <template slot-scope="scope">
- <el-button type="text" @click="getDetail(scope.row, 'edit')">管理</el-button>
- <el-button v-if="scope.row.status === 1" type="text" @click="getChange(scope.row, '上架')">上架</el-button>
- <el-button v-else type="text" @click="getChange(scope.row, '下架')">下架</el-button>
- </template>
- </el-table-column>
- </el-table>
- <!-- 分页 -->
- <pagination
- v-show="total>0"
- :total="total"
- :page.sync="form.pageNum"
- :limit.sync="form.pageSize"
- @pagination="getList"
- />
- </div>
- </template>
- <script>
- import { page, edit } from "@/api/project/list";
- export default {
- data() {
- return {
- // 遮罩层
- loading: false,
- // 表单
- form: {
- pageNum: 1,
- pageSize: 10,
- },
- total: 0,
- // 列表
- tableData: [],
- statusOptions: [
- {
- value: 0,
- label: "上架",
- },
- {
- value: 1,
- label: "下架",
- },
- ],
- };
- },
- mounted() {
- this.getList();
- },
- methods: {
- // 列表
- getList() {
- this.loading = true
- page(this.form).then((res) => {
- if (res.code === 0) {
- this.tableData = res.data.records;
- this.total = res.data.total;
- this.loading = false
- }
- });
- },
- // 搜索
- getSearch() {
- this.form.pageNum = 1;
- this.getList();
- },
- // 重置
- getRefresh() {
- this.form = {
- pageNum: 1,
- pageSize: 10,
- };
- this.getList();
- },
- // 新增 / 管理
- getDetail(row, key) {
- this.$router.push({
- path: `/project/list/detail`,
- query: {
- row: JSON.stringify(row),
- key: key,
- },
- });
- },
- getChange(row, key) {
- row.status = key === "上架" ? 0 : 1;
- edit(row).then((res) => {
- if (res.code === 0) {
- this.$message.success("修改成功!");
- this.getList()
- }
- });
- },
- statusFormatter(row) {
- return this.selectDictLabel(this.statusOptions, row.status);
- },
- },
- };
- </script>
- <style lang="scss" scoped>
- .el-image {
- border-radius: 20px;
- }
- </style>
|