|
@@ -0,0 +1,143 @@
|
|
|
+<template>
|
|
|
+ <div id="links">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" class="style">
|
|
|
+ <el-col :span="24" class="list" v-if="display">
|
|
|
+ <el-col :span="24" class="top"><el-button type="primary" size="mini" @click="add">添加</el-button></el-col>
|
|
|
+ <el-table :data="tableData" border style="width: 100%">
|
|
|
+ <el-table-column prop="name" label="链接名称" align="center" :show-overflow-tooltip="true" width="180px"> </el-table-column>
|
|
|
+ <el-table-column prop="url" label="链接地址" align="center" :show-overflow-tooltip="true"> </el-table-column>
|
|
|
+ <el-table-column prop="img_url" label="链接图片" align="center" :show-overflow-tooltip="true" width="180px">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-image :src="scope.row.img_url"></el-image>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" align="center" width="230px">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button size="mini" @click="view(scope.row.id)">查看</el-button>
|
|
|
+ <el-button type="danger" size="mini" @click="del(scope.row.id)">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <page :total="total" position="right" @query="search"></page>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="detail" v-else>
|
|
|
+ <el-col class="top"><el-button type="primary" size="mini" @click="back">返回</el-button></el-col>
|
|
|
+ <el-col>
|
|
|
+ <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
|
|
|
+ <el-form-item>
|
|
|
+ <el-form-item label="链接名称:">
|
|
|
+ <el-input v-model="form.name" placeholder="请输入需求技术名称"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="链接地址:" prop="url">
|
|
|
+ <el-input v-model="form.url" placeholder="请输入需求技术名称"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="链接图片:">
|
|
|
+ <upload :limit="1" :data="form.img_url" type="img_url" :url="'/files/count/upload'" @upload="uploadSuccess"></upload>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="onSubmit()">提交</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import page from '@/components/pagination.vue';
|
|
|
+import upload from '@/components/uploadone.vue';
|
|
|
+import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
+const { mapActions: links } = createNamespacedHelpers('links');
|
|
|
+export default {
|
|
|
+ name: 'links',
|
|
|
+ props: {},
|
|
|
+ components: { page, upload },
|
|
|
+ data: () => ({
|
|
|
+ tableData: [],
|
|
|
+ display: true,
|
|
|
+ form: {},
|
|
|
+ total: 0,
|
|
|
+ rules: {
|
|
|
+ url: [{ required: true, message: '请输入链接地址', trigger: 'blur' }],
|
|
|
+ },
|
|
|
+ }),
|
|
|
+ created() {
|
|
|
+ this.search();
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ methods: {
|
|
|
+ ...links(['update', 'fetch', 'query', 'create', 'delete']),
|
|
|
+ // 查询信息列表
|
|
|
+ async search({ skip = 0, limit = 10, ...info } = {}) {
|
|
|
+ let res = await this.query({ skip, limit, ...info });
|
|
|
+ this.$set(this, `tableData`, res.data);
|
|
|
+ this.$set(this, `total`, res.total);
|
|
|
+ },
|
|
|
+ async view(id) {
|
|
|
+ const res = await this.fetch(id);
|
|
|
+ this.$set(this, `form`, res.data);
|
|
|
+ this.display = false;
|
|
|
+ },
|
|
|
+ async del(id) {
|
|
|
+ const res = await this.delete(id);
|
|
|
+ if (res.errcode === 0) {
|
|
|
+ this.$message({
|
|
|
+ message: '信息删除成功',
|
|
|
+ type: 'success',
|
|
|
+ });
|
|
|
+ this.search();
|
|
|
+ } else {
|
|
|
+ this.$message.error('信息删除失败');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ add() {
|
|
|
+ this.display = false;
|
|
|
+ this.form = {};
|
|
|
+ },
|
|
|
+ // 返回
|
|
|
+ back() {
|
|
|
+ this.display = true;
|
|
|
+ },
|
|
|
+ uploadSuccess({ type, data }) {
|
|
|
+ this.$set(this.form, `img_url`, data.uri);
|
|
|
+ },
|
|
|
+ async onSubmit() {
|
|
|
+ let res = {};
|
|
|
+ let data = JSON.parse(JSON.stringify(this.form));
|
|
|
+ console.log(data);
|
|
|
+
|
|
|
+ if (data.id) {
|
|
|
+ res = await this.update(data);
|
|
|
+ } else {
|
|
|
+ res = await this.create(data);
|
|
|
+ }
|
|
|
+ if (res.errcode === 0) {
|
|
|
+ this.$message({
|
|
|
+ message: '信息创建成功',
|
|
|
+ type: 'success',
|
|
|
+ });
|
|
|
+ this.display = true;
|
|
|
+ this.search();
|
|
|
+ } else {
|
|
|
+ this.$message.error('信息创建失败');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.style {
|
|
|
+ width: 95%;
|
|
|
+ margin: 0 auto;
|
|
|
+ float: none;
|
|
|
+}
|
|
|
+.top {
|
|
|
+ text-align: right;
|
|
|
+ padding: 0 0 10px 0;
|
|
|
+}
|
|
|
+</style>
|