Merge branch 'master' of ssh://193.200.130.186:26488/chenke/hl-web-admin

src/api/subject.js

@@ -0,0 +1,69 @@
+import request from '@/utils/request'
+
+// 查询主题列表
+export function listSubject(query) {
+  return request({
+    url: '/special/specialBackList',
+    method: 'get',
+    params: query
+  })
+}
+
+
+// 新增主题
+export function addSubject(data) {
+  return request({
+    url: '/special/addSpecial',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改主题
+export function updateSubject(data) {
+  return request({
+    url: '/special/specialEdit',
+    method: 'post',
+    data: data
+  })
+}
+
+// 删除主题
+export function delSubject(data) {
+  return request({
+    url: '/special/specialDel',
+    method: 'post',
+    data: data
+  })
+}
+
+
+
+// 查询主题文章列表
+export function listSubjectArticle(query) {
+  return request({
+    url: '/special/specialBackListMore',
+    method: 'get',
+    params: query
+  })
+}
+
+
+// 新增文章
+export function addSubjectArticle(data) {
+  return request({
+    url: '/special/specialBind',
+    method: 'post',
+    data: data
+  })
+}
+
+// 删除主题
+export function delSubjectArticle(data) {
+  console.log(data)
+  return request({
+    url: '/special/specialSolution',
+    method: 'post',
+    data: data
+  })
+}

src/router/routes.js

@@ -70,6 +70,24 @@ const routes = [
       component: () => import('@/views/article/category'),
       meta: { title: '文章类别', icon: 'form', noCache: true }
     },
+    {
+      path: 'subject',
+      component: () => import('@/views/article/subject/layout'),
+      name: 'subject',
+      meta: { title: '专题管理', icon: 'form' },
+      children: [{
+        path: 'list',
+        name: 'subjectIndex',
+        component: () => import('@/views/article/subject/index'),
+        meta: { title: '专题列表', icon: 'form', noCache: true }
+      }, {
+        path: 'article',
+        name: 'subjectArticle',
+        component: () => import('@/views/article/subject/article'),
+        meta: { title: '专题文章', icon: 'form', noCache: true }
+      },
+      ]
+    },
     ]
   },
 

src/utils/get-img-width.js

@@ -31,6 +31,14 @@ export default function (file, id) {
             width = 722;
             height = 406;
             break;
+        case 'subjectCover': //专题封面
+            width = 650;
+            height = 350;
+            break;
+        case 'subjectBanner': //专题封面
+            width = 1585;
+            height = 224;
+            break;
     };
     return new Promise(resolve => {
         let reader = new FileReader();

src/views/article/index.vue

@@ -208,6 +208,7 @@
               :options="categoryOptions"
               :normalizer="normalizer"
               :show-count="true"
+              :disabled="dialogStatus=='create'"
               placeholder="选择分类"
             />
           </el-form-item>
@@ -394,8 +395,8 @@ export default {
       dialogFormVisible: false,
       dialogStatus: "",
       textMap: {
-        update: "Edit",
-        create: "Create",
+        update: "编辑",
+        create: "添加",
       },
       rules: {
         title: [

src/views/article/subject/article.vue

@@ -0,0 +1,354 @@
+<template>
+  <div class="app-container">
+    <el-form
+            ref="queryForm"
+            :model="listQuery"
+            :inline="true"
+            label-width="68px"
+          >
+            <el-form-item label="专题" prop="special_id">
+              <el-select
+                v-model="listQuery.special_id"
+                placeholder="专题"
+                clearable
+                size="small"
+                style="width: 160px"
+              >
+                <el-option
+                  v-for="dict in subject"
+                  :key="dict.special_id"
+                  :label="dict.title"
+                  :value="dict.special_id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-button
+                type="primary"
+                icon="el-icon-search"
+                size="mini"
+                @click="getList"
+                >搜索</el-button
+              >
+            </el-form-item>
+          </el-form>
+    <div class="filter-container">
+      <el-button
+        class="filter-item el-button el-button--primary el-button--mini"
+        type="primary"
+        icon="el-icon-edit"
+        @click="handleCreate"
+        >添加文章</el-button>
+    </div>
+    <el-table
+      :key="tableKey"
+      v-loading="listLoading"
+      :data="list"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%"
+    >
+      <el-table-column label="ID" prop="id" align="center">
+        <template slot-scope="{ row }">
+          <span>{{ row.id }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="专题" align="center">
+        <template slot-scope="{ row }">
+          <span>{{ row.special_id | getSubjectName(subject) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="标题" align="center">
+        <template slot-scope="{ row }">
+          <span>{{ row.article_title }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="封面图" align="center">
+        <template slot-scope="{ row }">
+          <img :src="row.img" height="100" />
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center">
+        <template slot-scope="{ row }">
+          <span>{{ row.create_time }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.page"
+      :limit.sync="listQuery.limit"
+      @pagination="getList"
+    />
+    <!-- 添加或修改分类对话框 -->
+    <el-drawer
+      ref="drawer"
+      :title="textMap[dialogStatus]"
+      :visible.sync="dialogFormVisible"
+      direction="rtl"
+      custom-class="drawer"
+      size="950px"
+    >
+      <div class="drawer__content">
+        <el-form
+          ref="dataForm"
+          :model="temp"
+          label-position="left"
+          label-width="70px"
+          style
+        >
+          <el-form-item label="专题">
+            <el-select v-model="temp.special_id" placeholder="选择专题">
+              <el-option
+                v-for="(item, index) in subject"
+                :key="index"
+                :label="item.title"
+                :value="item.special_id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="关联文章">
+            <el-select
+              v-model="temp.article_id"
+              remote
+              :loading="searchArticleLoading"
+              :remote-method="remoteMethod"
+              reserve-keyword
+              placeholder="请输入关键字搜索"
+              filterable
+              :clearable="true"
+              @change="handleSelectBranch"
+            >
+              <el-option
+                v-for="(item, index) in articles"
+                :key="index"
+                :label="item.title"
+                :value="item.article_id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <div class="drawer__footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="dialogFormVisible = false">取 消</el-button>
+        </div>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import {
+  listSubject,
+  listSubjectArticle,
+  addSubjectArticle,
+  delSubjectArticle,
+} from "@/api/subject";
+
+import {
+  searchArticle,
+} from "@/api/ad";
+
+import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
+
+export default {
+  name: "adIndex",
+  components: { Pagination },
+  data() {
+    return {
+      tableKey: 0,
+      list: null,
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        limit: 20,
+        special_id: undefined
+      },
+      subject: [],
+      uploadAction: process.env.VUE_APP_BASE_API + "/files/uploadFile",
+      temp: {
+        id: undefined,
+        special_id: undefined,
+        article_id: undefined,
+      },
+      dialogFormVisible: false,
+      dialogStatus: "",
+      textMap: {
+        update: "编辑",
+        create: "添加",
+      },
+      rules: {
+        // title: [
+        //   { required: true, message: "title is required", trigger: "blur" },
+        // ],
+      },
+      downloadLoading: false,
+      searchArticleLoading: false,
+      articles: [],
+      validation: true,
+    };
+  },
+  created() {
+    this.getSubjectList()
+    this.getList();
+  },
+  filters: {
+    getSubjectName(id, subject) {
+      for (var i = 0; i < subject.length; i++) {
+        if (id == subject[i].special_id) {
+          return subject[i].title;
+        }
+      }
+      return "";
+    },
+  },
+  methods: {
+    getSubjectList() {
+      this.listLoading = true;
+      listSubject(this.listQuery).then((response) => {
+        this.subject = response.data;
+      });
+    },
+    getList() {
+      this.listLoading = true;
+      listSubjectArticle(this.listQuery).then((response) => {
+        this.list = response.data.list;
+        this.total = response.data.count;
+
+        // Just to simulate the time of the request
+        setTimeout(() => {
+          this.listLoading = false;
+        }, 1.5 * 1000);
+      });
+    },
+    handleFilter() {
+      this.listQuery.page = 1;
+      this.getList();
+    },
+    handleModifyStatus(row, status) {
+      this.$message({
+        message: "操作Success",
+        type: "success",
+      });
+      row.status = status;
+    },
+    resetTemp() {
+      this.temp = {
+         id: undefined,
+         special_id: undefined,
+         article_id: undefined,
+      };
+    },
+    submitForm() {
+      if (this.dialogStatus == "create") {
+        this.createData();
+      } else if (this.dialogStatus == "update") {
+        this.updateData();
+      }
+    },
+    handleCreate() {
+      this.resetTemp();
+      this.dialogStatus = "create";
+      this.dialogFormVisible = true;
+    },
+    createData() {
+      // this.$refs['dataForm'].validate((valid) => {
+      //   if (valid) {
+      addSubjectArticle(this.temp).then(() => {
+        this.dialogFormVisible = false;
+        this.$message({
+          message: "添加成功",
+          type: "success",
+          duration: 2 * 1000,
+        });
+        this.getList();
+      });
+      //   }
+      // })
+    },
+    handleDelete({ article_title, article_id, special_id }) {
+      this.$confirm('是否确认删除名称为"' + article_title + '"的数据项?', "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(function () {
+          return delSubjectArticle({ article_id, special_id });
+        })
+        .then((response) => {
+          if (response.code === 200) {
+            this.$message({
+              message: "删除成功",
+              type: "success",
+              duration: 2 * 1000,
+            });
+            this.open = false;
+            this.getList();
+          } else {
+            this.$message({
+              message: "删除失败",
+              type: "error",
+              duration: 2 * 1000,
+            });
+          }
+        })
+        .catch(function () {});
+    },
+    
+    handleSelectBranch(item) {
+      console.log("远程搜索选中后返回的item：：：：：即value的值");
+      console.log(item);
+      //如果要获取选择的 id或者名字   从item中取值
+      this.$set(this.temp, "article_id", item);
+    },
+    // 搜索模糊查询数据下拉框
+    remoteMethod(query) {
+      var that = this;
+      searchArticle(query)
+        .then(function (res) {
+          //将取到的值进行遍历
+          that.articles = res.data;
+          that.list = that.states.map((item) => {
+            // item.uid     item.name根据接口里的关键字
+            return { value: item.uid, label: item.name };
+          });
+        })
+        .catch(function (err) {
+          console.log(err);
+        });
+      return;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.app-container {
+  .filter-container {
+    margin-left: 5px;
+    margin-bottom: 6px;
+  }
+  ::v-deep .el-drawer__body {
+    padding: 20px;
+  }
+}
+</style>
+ 

src/views/article/subject/index.vue

@@ -0,0 +1,398 @@
+<template>
+  <div class="app-container">
+    <el-form
+            ref="queryForm"
+            :model="listQuery"
+            :inline="true"
+            label-width="68px"
+          >
+            <el-form-item label="专题名称" prop="title">
+              <el-input
+                v-model="listQuery.title"
+                placeholder="请输入专题名称"
+                clearable
+                size="small"
+                style="width: 160px"
+                @keyup.enter.native="getList"
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-button
+                type="primary"
+                icon="el-icon-search"
+                size="mini"
+                @click="getList"
+                >搜索</el-button
+              >
+            </el-form-item>
+          </el-form>
+    <div class="filter-container">
+      <el-button
+        class="filter-item el-button el-button--primary el-button--mini"
+        type="primary"
+        icon="el-icon-edit"
+        @click="handleCreate"
+        >添加专题</el-button
+      >
+    </div>
+    <el-table
+      :key="tableKey"
+      v-loading="listLoading"
+      :data="list"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%"
+    >
+      <el-table-column label="ID" prop="id" align="center">
+        <template slot-scope="{ row }">
+          <span>{{ row.special_id }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="标题" align="center">
+        <template slot-scope="{ row }">
+          <span>{{ row.title }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="封面图" align="center">
+        <template slot-scope="{ row }">
+          <img :src="row.img" height="100" />
+        </template>
+      </el-table-column>
+      <el-table-column label="banner图" align="center">
+        <template slot-scope="{ row }">
+          <img :src="row.image" height="100" />
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center">
+        <template slot-scope="{ row }">
+          <span>{{ row.create_time }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            >修改</el-button
+          >
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 添加或修改分类对话框 -->
+    <el-drawer
+      ref="drawer"
+      :title="textMap[dialogStatus]"
+      :visible.sync="dialogFormVisible"
+      direction="rtl"
+      custom-class="drawer"
+      size="950px"
+    >
+      <div class="drawer__content">
+        <el-form
+          ref="dataForm"
+          :model="temp"
+          label-position="left"
+          label-width="70px"
+          style
+        >
+          <el-form-item label="状态">
+            <el-select v-model="temp.is_show" placeholder="选择状态">
+              <el-option
+                v-for="(item, index) in statics"
+                :key="index"
+                :label="item.name"
+                :value="item.value"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="标题" prop="title">
+            <el-input v-model="temp.title" />
+          </el-form-item>
+          <el-form-item label="封面" prop="img" required>
+            <img
+              v-if="temp.img"
+              :src="temp.img"
+              class="el-upload el-upload--picture-card"
+              style="float: left; width: auto"
+            />
+            <el-upload
+              ref="sys_app_logo"
+              :on-success="uploadImgSuccess"
+              :on-error="uploadError"
+              :action="uploadAction"
+              style="float: left"
+              list-type="picture-card"
+              :show-file-list="false"
+              :before-upload="validationImg"
+            >
+              <i class="el-icon-plus" />
+            </el-upload>
+          </el-form-item>
+
+          <el-form-item label="banner" prop="image" required>
+            <img
+              v-if="temp.image"
+              :src="temp.image"
+              class="el-upload el-upload--picture-card"
+              style="float: left; width: auto"
+            />
+            <el-upload
+              ref="sys_app_logo"
+              :on-success="uploadSuccess"
+              :on-error="uploadError"
+              :action="uploadAction"
+              style="float: left"
+              list-type="picture-card"
+              :show-file-list="false"
+              :before-upload="validationImages"
+            >
+              <i class="el-icon-plus" />
+            </el-upload>
+          </el-form-item>
+
+        </el-form>
+        <div class="drawer__footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="dialogFormVisible = false">取 消</el-button>
+        </div>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import {
+  listSubject,
+  addSubject,
+  updateSubject,
+  delSubject,
+} from "@/api/subject";
+
+export default {
+  name: "SubjectIndex",
+  data() {
+    return {
+      tableKey: 0,
+      list: null,
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        limit: 20,
+      },
+      uploadAction: process.env.VUE_APP_BASE_API + "/files/uploadFile",
+      temp: {
+        id: undefined,
+        title: "",
+        is_show: 1,
+        title: "",
+        img: "",
+        image: "",
+      },
+      statics: [
+        { name: "显示", value: 1 },
+        { name: "隐藏", value: 2 },
+      ],
+      dialogFormVisible: false,
+      dialogStatus: "",
+      textMap: {
+        update: "编辑",
+        create: "添加",
+      },
+      rules: {
+        title: [
+          { required: true, message: "title is required", trigger: "blur" },
+        ],
+      },
+      downloadLoading: false,
+      searchArticleLoading: false,
+      articles: [],
+      validation: true,
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    // 验证图片宽高
+    async validationImg(file) {
+      let res = await this.$getImgWidth(file, 'subjectCover');
+      this.validation = res;
+      return res;
+    },
+    async validationImages(file) {
+      let res = await this.$getImgWidth(file, 'subjectBanner');
+      this.validation = res;
+      return res;
+    },
+    getList() {
+      this.listLoading = true;
+      listSubject(this.listQuery).then((response) => {
+        this.list = response.data;
+
+        // Just to simulate the time of the request
+        setTimeout(() => {
+          this.listLoading = false;
+        }, 1.5 * 1000);
+      });
+    },
+    handleFilter() {
+      this.listQuery.page = 1;
+      this.getList();
+    },
+    handleModifyStatus(row, status) {
+      this.$message({
+        message: "操作Success",
+        type: "success",
+      });
+      row.status = status;
+    },
+    resetTemp() {
+      this.temp = {
+        id: undefined,
+        title: "",
+        is_show: 1,
+        title: "",
+        img: "",
+        image: "",
+      };
+    },
+    submitForm() {
+      if (this.dialogStatus == "create") {
+        this.createData();
+      } else if (this.dialogStatus == "update") {
+        this.updateData();
+      }
+    },
+    handleCreate() {
+      this.resetTemp();
+      this.dialogStatus = "create";
+      this.dialogFormVisible = true;
+      // this.$nextTick(() => {
+      //   this.$refs['dataForm'].clearValidate()
+      // })
+    },
+    createData() {
+      // this.$refs['dataForm'].validate((valid) => {
+      //   if (valid) {
+      addSubject(this.temp).then(() => {
+        this.dialogFormVisible = false;
+        this.$message({
+          message: "添加成功",
+          type: "success",
+          duration: 2 * 1000,
+        });
+        this.getList();
+      });
+      //   }
+      // })
+    },
+    handleUpdate(row) {
+      // let special_id = row.special_id
+      // fetchAdDetails({special_id}).then(res => {
+
+      var that = this;
+          that.temp = row;
+          this.dialogStatus = "update";
+          this.dialogFormVisible = true;
+    },
+    updateData() {
+      // this.$refs['dataForm'].validate((valid) => {
+      //   if (valid) {
+      updateSubject(this.temp).then(() => {
+        this.dialogFormVisible = false;
+        this.$message({
+          message: "更新成功",
+          type: "success",
+          duration: 2 * 1000,
+        });
+
+        this.getList();
+      });
+      //   }
+      // })
+    },
+    handleDelete({ title, special_id }) {
+      this.$confirm('是否确认删除名称为"' + title + '"的数据项?', "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(function () {
+          console.log("del");
+          return delSubject({ special_id });
+        })
+        .then((response) => {
+          if (response.code === 200) {
+            this.$message({
+              message: "删除成功",
+              type: "success",
+              duration: 2 * 1000,
+            });
+            this.open = false;
+            this.getList();
+          } else {
+            this.$message({
+              message: "删除失败",
+              type: "error",
+              duration: 2 * 1000,
+            });
+          }
+        })
+        .catch(function () {});
+    },
+    uploadImgSuccess(response, file) {
+      if (this.validation && response.state == "SUCCESS") {
+        this.temp.img = response.url;
+      }
+    },
+    uploadSuccess(response, file) {
+      if (this.validation && response.state == "SUCCESS") {
+        this.temp.image = response.url;
+      }
+    },
+    uploadRemove(file) {
+      const uid = file.uid;
+      const objKeyArr = Object.keys(this.listObj);
+      for (let i = 0, len = objKeyArr.length; i < len; i++) {
+        if (this.listObj[objKeyArr[i]].uid === uid) {
+          delete this.listObj[objKeyArr[i]];
+          return;
+        }0
+      }
+    },
+    uploadError(err) {
+      this.$alert(err, "发生错误", {
+        confirmButtonText: "确定",
+        callback: (action) => {},
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.app-container {
+  .filter-container {
+    margin-left: 5px;
+    margin-bottom: 6px;
+  }
+  ::v-deep .el-drawer__body {
+    padding: 20px;
+  }
+}
+</style>

src/views/article/subject/layout.vue

@@ -0,0 +1,3 @@
+<template>
+    <router-view />
+</template>