|
|
@@ -0,0 +1,292 @@
|
|
|
+<template>
|
|
|
+ <div class="ele-body">
|
|
|
+ <el-card shadow="never">
|
|
|
+ <!-- 搜索表单 -->
|
|
|
+ <el-form :model="table.where" label-width="100px" class="ele-form-search"
|
|
|
+ @keyup.enter.native="$refs.table.reload()" @submit.native.prevent>
|
|
|
+ <el-row :gutter="15">
|
|
|
+ <el-col :md="6" :sm="12">
|
|
|
+ <el-form-item label="院校名称">
|
|
|
+ <el-input v-model="table.where.keyword" placeholder="请输入院校名称或代码" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :md="6" :sm="12">
|
|
|
+ <el-form-item label="链接类型">
|
|
|
+ <el-select v-model="table.where.link_type" placeholder="请选择链接类型" clearable>
|
|
|
+ <el-option label="Web链接" :value="1" />
|
|
|
+ <el-option label="小程序链接" :value="2" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :md="6" :sm="12">
|
|
|
+ <el-form-item label="状态">
|
|
|
+ <el-select v-model="table.where.status" placeholder="请选择状态" clearable>
|
|
|
+ <el-option label="正常" :value="1" />
|
|
|
+ <el-option label="不显示" :value="2" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :md="6" :sm="12">
|
|
|
+ <div class="ele-form-actions">
|
|
|
+ <el-button type="primary" @click="$refs.table.reload()" icon="el-icon-search"
|
|
|
+ class="ele-btn-icon">查询</el-button>
|
|
|
+ <el-button @click="resetSearch">重置</el-button>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <!-- 操作按钮 -->
|
|
|
+ <div class="ele-table-tool ele-table-tool-default">
|
|
|
+ <el-button type="primary" v-if="permission.includes(permissionMap['add'])" icon="el-icon-plus"
|
|
|
+ @click="openForm()">
|
|
|
+ 新增院校
|
|
|
+ </el-button>
|
|
|
+ <el-button type="danger" v-if="permission.includes(permissionMap['delete'])" icon="el-icon-delete"
|
|
|
+ @click="batchRemove()">
|
|
|
+ 批量删除
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 数据表格 -->
|
|
|
+ <ele-data-table ref="table" :config="table" :choose.sync="choose" height="calc(100vh - 280px)"
|
|
|
+ highlight-current-row>
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <el-table-column type="selection" width="45" align="center" fixed="left" />
|
|
|
+ <el-table-column type="index" label="编号" width="60" align="center" fixed="left" />
|
|
|
+ <el-table-column prop="name" label="院校名称" min-width="150" />
|
|
|
+ <el-table-column prop="code" label="院校代码" width="120" />
|
|
|
+ <el-table-column prop="thumb" label="封面/Logo" width="100">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <el-image v-if="row.thumb" :src="row.thumb" style="width: 50px; height: 50px;"
|
|
|
+ fit="cover" />
|
|
|
+ <span v-else>-</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="link_type" label="链接类型" width="100">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <el-tag :type="row.link_type === 1 ? 'primary' : 'success'">
|
|
|
+ {{ row.link_type === 1 ? 'Web链接' : '小程序链接' }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="link_url" label="详情地址" min-width="200" show-overflow-tooltip>
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <el-link v-if="row.link_url" :href="row.link_url" target="_blank" type="primary">
|
|
|
+ {{ row.link_url }}
|
|
|
+ </el-link>
|
|
|
+ <span v-else>-</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="description" label="介绍" min-width="150" show-overflow-tooltip />
|
|
|
+ <el-table-column prop="sort" label="排序" width="80" align="center">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <el-input-number v-model="row.sort" :min="0" size="mini" @change="updateSort(row)" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="状态" width="80">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <el-switch v-model="row.status" :active-value="1" :inactive-value="2"
|
|
|
+ @change="editStatus(row)" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="create_time" label="创建时间" width="160" />
|
|
|
+ <el-table-column label="操作" width="160" fixed="right">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <el-button v-if="permission.includes(permissionMap['edit'])" type="text" size="mini"
|
|
|
+ @click="openForm(row)">编辑</el-button>
|
|
|
+ <el-button v-if="permission.includes(permissionMap['delete'])" type="text" size="mini"
|
|
|
+ @click="remove(row)">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </template>
|
|
|
+ </ele-data-table>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <!-- 新增/编辑弹窗 -->
|
|
|
+ <el-dialog :title="isEdit ? '编辑院校' : '新增院校'" :visible.sync="formVisible" width="600px">
|
|
|
+ <el-form :model="formData" :rules="formRules" ref="formRef" label-width="120px">
|
|
|
+ <el-form-item label="院校名称" prop="name">
|
|
|
+ <el-input v-model="formData.name" placeholder="请输入院校名称" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="院校代码" prop="code">
|
|
|
+ <el-input v-model="formData.code" placeholder="请输入院校代码" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="封面/Logo">
|
|
|
+ <uploadImage :limit="1" v-model="formData.thumb"></uploadImage>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="链接类型" prop="link_type">
|
|
|
+ <el-select v-model="formData.link_type" placeholder="请选择链接类型">
|
|
|
+ <el-option label="Web链接" :value="1" />
|
|
|
+ <el-option label="小程序链接" :value="2" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="详情地址" prop="link_url">
|
|
|
+ <el-input v-model="formData.link_url" placeholder="请输入详情地址" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="介绍">
|
|
|
+ <el-input v-model="formData.description" type="textarea" placeholder="请输入院校介绍" rows="3" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="排序">
|
|
|
+ <el-input-number v-model="formData.sort" :min="0" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="状态">
|
|
|
+ <el-switch v-model="formData.status" :active-value="1" :inactive-value="2" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="formVisible = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="saveForm">保存</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
+import uploadImage from '@/components/uploadImage.vue'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "InstitutionPage",
|
|
|
+ components: {
|
|
|
+ uploadImage
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ table: {
|
|
|
+ url: "/institutions/index",
|
|
|
+ where: { keyword: "", link_type: null, status: null },
|
|
|
+ },
|
|
|
+ choose: [],
|
|
|
+ formData: {
|
|
|
+ id: null,
|
|
|
+ name: "",
|
|
|
+ code: "",
|
|
|
+ thumb: "",
|
|
|
+ link_type: 1,
|
|
|
+ link_url: "",
|
|
|
+ description: "",
|
|
|
+ sort: 0,
|
|
|
+ status: 1
|
|
|
+ },
|
|
|
+ isEdit: false,
|
|
|
+ formVisible: false,
|
|
|
+ formRules: {
|
|
|
+ name: [{ required: true, message: "请输入院校名称", trigger: "blur" }],
|
|
|
+ code: [{ required: true, message: "请输入院校代码", trigger: "blur" }],
|
|
|
+ link_type: [{ required: true, message: "请选择链接类型", trigger: "change" }],
|
|
|
+ link_url: [{ required: true, message: "请输入详情地址", trigger: "blur" }],
|
|
|
+ },
|
|
|
+ permissionMap: {
|
|
|
+ delete: "sys:institution:delete",
|
|
|
+ edit: "sys:institution:edit",
|
|
|
+ add: "sys:institution:add",
|
|
|
+ index: "sys:institution:index",
|
|
|
+ status: "sys:institution:status",
|
|
|
+ sort: "sys:institution:sort",
|
|
|
+ options: "sys:institution:options",
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: { ...mapGetters(["permission"]) },
|
|
|
+ methods: {
|
|
|
+ resetSearch() {
|
|
|
+ this.table.where = { keyword: "", link_type: null, status: null };
|
|
|
+ this.$refs.table.reload();
|
|
|
+ },
|
|
|
+ openForm(row) {
|
|
|
+ if (row) {
|
|
|
+ this.isEdit = true;
|
|
|
+ this.formData = {
|
|
|
+ id: row.id,
|
|
|
+ name: row.name,
|
|
|
+ code: row.code,
|
|
|
+ thumb: row.thumb || "",
|
|
|
+ link_type: row.link_type,
|
|
|
+ link_url: row.link_url,
|
|
|
+ description: row.description || "",
|
|
|
+ sort: row.sort || 0,
|
|
|
+ status: row.status
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ this.isEdit = false;
|
|
|
+ this.formData = {
|
|
|
+ id: null,
|
|
|
+ name: "",
|
|
|
+ code: "",
|
|
|
+ thumb: "",
|
|
|
+ link_type: 1,
|
|
|
+ link_url: "",
|
|
|
+ description: "",
|
|
|
+ sort: 0,
|
|
|
+ status: 1
|
|
|
+ };
|
|
|
+ }
|
|
|
+ this.formVisible = true;
|
|
|
+ },
|
|
|
+ async saveForm() {
|
|
|
+ this.$refs.formRef.validate(async (valid) => {
|
|
|
+ if (!valid) return;
|
|
|
+ try {
|
|
|
+ const res = await this.$http.post("/institutions/edit", this.formData);
|
|
|
+ if (res.data.code === 0) {
|
|
|
+ this.$message.success("保存成功");
|
|
|
+ this.formVisible = false;
|
|
|
+ this.$refs.table.reload();
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.data.msg);
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ this.$message.error("保存失败:" + e.message);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ async remove(row) {
|
|
|
+ const ids = row ? [row.id] : this.choose.map((d) => d.id);
|
|
|
+ if (!ids.length) return this.$message.warning("请选择数据");
|
|
|
+ this.$confirm("确定要删除选中院校吗?", "提示", { type: "warning" }).then(async () => {
|
|
|
+ try {
|
|
|
+ const res = await this.$http.post("/institutions/delete", { id: ids });
|
|
|
+ if (res.data.code === 0) {
|
|
|
+ this.$message.success("删除成功");
|
|
|
+ this.$refs.table.reload();
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.data.msg);
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ this.$message.error("删除失败:" + e.message);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ batchRemove() {
|
|
|
+ this.remove();
|
|
|
+ },
|
|
|
+ async editStatus(row) {
|
|
|
+ try {
|
|
|
+ const res = await this.$http.post("/institutions/status", { id: row.id, status: row.status });
|
|
|
+ if (res.data.code !== 0) {
|
|
|
+ this.$message.error(res.data.msg);
|
|
|
+ // 恢复原状态
|
|
|
+ row.status = row.status === 1 ? 2 : 1;
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ this.$message.error("状态更新失败:" + e.message);
|
|
|
+ // 恢复原状态
|
|
|
+ row.status = row.status === 1 ? 2 : 1;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async updateSort(row) {
|
|
|
+ try {
|
|
|
+ const res = await this.$http.post("/institutions/sort", { id: row.id, sort: row.sort });
|
|
|
+ if (res.data.code !== 0) {
|
|
|
+ this.$message.error(res.data.msg);
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ this.$message.error("排序更新失败:" + e.message);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped></style>
|