card md

src/assets/styles/pages.scss

@@ -672,3 +672,38 @@
     }
   }
 }
+
+// card-manage
+.card-create-type {
+  .card-types {
+    font-size: 0;
+    text-align: center;
+  }
+  .card-type {
+    display: inline-block;
+    vertical-align: top;
+    font-size: 20px;
+    margin: 0 5px;
+    height: 70px;
+    width: 150px;
+    line-height: 1;
+    padding: 25px 0;
+    border-radius: $--border-radius;
+    color: #fff;
+    cursor: pointer;
+
+    &:hover {
+      opacity: 0.8;
+    }
+
+    &:nth-of-type(1) {
+      background-color: $--color-primary;
+    }
+    &:nth-of-type(2) {
+      background-color: $--color-success;
+    }
+    &:nth-of-type(3) {
+      background-color: $--color-cyan;
+    }
+  }
+}

src/components/base/CardRuleSelect.vue

@@ -29,7 +29,8 @@ export default {
     disabled: { type: Boolean, default: false },
     placeholder: { type: String, default: "请选择" },
     value: { type: [Number, String], default: "" },
-    clearable: { type: Boolean, default: true }
+    clearable: { type: Boolean, default: true },
+    showCommonCard: { type: Boolean, default: true }
   },
   data() {
     return {
@@ -52,10 +53,11 @@ export default {
     async search(query) {
       const res = await cardRuleQuery(query);
       this.optionList = res;
-      this.optionList.unshift({
-        id: COMMON_CARD_RULE_ID,
-        name: "全部通卡"
-      });
+      if (this.showCommonCard)
+        this.optionList.unshift({
+          id: COMMON_CARD_RULE_ID,
+          name: "全部通卡"
+        });
     },
     select() {
       this.$emit("input", this.selected);

src/constants/enumerate.js

@@ -64,6 +64,12 @@ export const SMS_TYPE = {
 // 通用题卡规则id
 export const COMMON_CARD_RULE_ID = "-1";
 
+export const CARD_CREATE_TYPE = {
+  UPLOAD: "上传文件",
+  STANDARD: "标准模式",
+  FREE: "自由模式"
+};
+
 // 模板类型
 export const TEMPLATE_TYPE = {
   GENERIC: "通卡模板",

src/constants/menus-data.js

@@ -615,6 +615,136 @@ export default [
               }
             ]
           },
+          {
+            id: "1005",
+            name: "题卡管理",
+            url: "CardManage",
+            type: "MENU",
+            parentId: "3",
+            schoolId: "2",
+            sequence: 2,
+            enable: true,
+            urls: [
+              {
+                id: "101",
+                name: "题卡管理-查询",
+                url: "/api/admin/basic/card_rule/list",
+                type: "URL",
+                parentId: "9",
+                schoolId: "2",
+                sequence: 1,
+                enable: true
+              },
+              {
+                id: "102",
+                name: "题卡管理-查询单个",
+                url: "/api/admin/basic/card_rule/get_one",
+                type: "URL",
+                parentId: "9",
+                schoolId: "2",
+                sequence: 2,
+                enable: true
+              },
+              {
+                id: "103",
+                name: "题卡管理-新增/修改",
+                url: "/api/admin/basic/card_rule/save",
+                type: "URL",
+                parentId: "9",
+                schoolId: "2",
+                sequence: 3,
+                enable: true
+              },
+              {
+                id: "104",
+                name: "题卡管理-启用/禁用",
+                url: "/api/admin/basic/card_rule/enable",
+                type: "URL",
+                parentId: "9",
+                schoolId: "2",
+                sequence: 4,
+                enable: true
+              }
+            ],
+            buttons: [
+              {
+                id: "237",
+                name: "题卡管理-查询",
+                url: "Select",
+                type: "BUTTON",
+                parentId: "9",
+                schoolId: "2",
+                sequence: 1,
+                enable: true
+              },
+              {
+                id: "238",
+                name: "题卡管理-添加",
+                url: "Add",
+                type: "BUTTON",
+                parentId: "9",
+                schoolId: "2",
+                sequence: 2,
+                enable: true
+              }
+            ],
+            links: [
+              {
+                id: "342",
+                name: "题卡管理-预览",
+                url: "Preview",
+                type: "LINK",
+                parentId: "9",
+                schoolId: "2",
+                sequence: 1,
+                enable: true
+              },
+              {
+                id: "343",
+                name: "题卡管理-编辑",
+                url: "Edit",
+                type: "LINK",
+                parentId: "9",
+                schoolId: "2",
+                sequence: 2,
+                enable: true
+              },
+              {
+                id: "345",
+                name: "题卡管理-启用&禁用",
+                url: "Enable",
+                type: "LINK",
+                parentId: "9",
+                schoolId: "2",
+                sequence: 3,
+                enable: true
+              }
+            ],
+            lists: [
+              {
+                id: "240",
+                name: "题卡管理-列表",
+                url: "List",
+                type: "LIST",
+                parentId: "9",
+                schoolId: "2",
+                sequence: 1,
+                enable: true
+              }
+            ],
+            conditions: [
+              {
+                id: "239",
+                name: "题卡管理-查询条件",
+                url: "Condition",
+                type: "CONDITION",
+                parentId: "9",
+                schoolId: "2",
+                sequence: 1,
+                enable: true
+              }
+            ]
+          },
           {
             id: "10",
             name: "通卡模板",

src/modules/base/api.js

@@ -123,6 +123,13 @@ export const templateCategoryList = type => {
 export const templateContentView = attachmentId => {
   return $postParam("/api/admin/basic/template/read_content", { attachmentId });
 };
+// card-manage
+export const cardListPage = datas => {
+  return $postParam("/api/admin/basic/card/list", datas);
+};
+export const deleteCard = id => {
+  return $post("/api/admin/basic/card/remove", { id });
+};
 // course-manage
 export const courseListPage = datas => {
   return $postParam("/api/admin/basic/course/list", datas);

src/modules/base/components/ModifyCardInfo.vue

@@ -0,0 +1,232 @@
+<template>
+  <el-dialog
+    class="modify-card-info"
+    :visible.sync="modalIsShow"
+    :title="title"
+    top="10px"
+    width="600px"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    append-to-body
+    @open="visibleChange"
+  >
+    <el-form
+      ref="modalFormComp"
+      label-position="top"
+      :rules="rules"
+      :model="modalForm"
+    >
+      <el-form-item prop="name" label="题卡名称：">
+        <el-input
+          v-model.trim="modalForm.name"
+          placeholder="建议不超过30个字，题卡名称不允许重复"
+          clearable
+        ></el-input>
+      </el-form-item>
+      <el-form-item prop="remark" label="备注：">
+        <el-input
+          v-model="modalForm.remark"
+          type="textarea"
+          resize="none"
+          :rows="2"
+          :maxlength="50"
+          clearable
+          show-word-limit
+          placeholder="建议不超过50个字"
+        ></el-input>
+      </el-form-item>
+      <el-form-item v-if="IS_UPLOAD" prop="attachmentId" label="上传模板文件：">
+        <upload-file-view
+          :upload-data="uploadData"
+          :upload-url="uploadUrl"
+          :format="format"
+          @upload-error="uplaodError"
+          @upload-success="uploadSuccess"
+          ref="UploadFileView"
+        ></upload-file-view>
+      </el-form-item>
+      <el-form-item v-if="IS_STANDARD" prop="cardRuleId" label="题卡规则：">
+        <card-rule-select
+          ref="CardRuleSelect"
+          v-model.trim="modalForm.cardRuleId"
+          placeholder="请选择题卡规则"
+          clearable
+          class="width-full"
+          :show-common-card="false"
+        ></card-rule-select>
+      </el-form-item>
+      <el-form-item prop="orgIds" label="适用学院范围：">
+        <select-orgs v-model="modalForm.orgIds" ref="SelectOrgs"></select-orgs>
+      </el-form-item>
+    </el-form>
+
+    <div slot="footer">
+      <el-button type="primary" :disabled="isSubmit" @click="submit"
+        >确认</el-button
+      >
+      <el-button @click="cancel">取消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { updateTemplate } from "../api";
+import { attachmentDetail } from "../../login/api";
+import UploadFileView from "@/components/UploadFileView";
+import SelectOrgs from "./SelectOrgs";
+
+const initModalForm = {
+  id: null,
+  name: "",
+  createType: "",
+  remark: "",
+  cardRuleId: "",
+  attachmentId: "",
+  orgIds: []
+};
+
+export default {
+  name: "modify-card-info",
+  components: { UploadFileView, SelectOrgs },
+  props: {
+    instance: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  computed: {
+    isEdit() {
+      return !!this.modalForm.id;
+    },
+    title() {
+      return (this.isEdit ? "编辑" : "新增") + "题卡";
+    },
+    IS_UPLOAD() {
+      return this.modalForm.createType === "UPLOAD";
+    },
+    IS_STANDARD() {
+      return this.modalForm.createType === "STANDARD";
+    },
+    IS_FREE() {
+      return this.modalForm.createType === "FREE";
+    }
+  },
+  data() {
+    return {
+      modalIsShow: false,
+      isSubmit: false,
+      modalForm: {},
+      attachment: {},
+      format: ["html"],
+      rules: {
+        name: [
+          {
+            required: true,
+            message: "题卡名称不能超过30个字",
+            max: 30,
+            trigger: "change"
+          }
+        ],
+        attachmentId: [
+          {
+            required: true,
+            message: "请上传模板文件",
+            trigger: "change"
+          }
+        ],
+        cardRuleId: [
+          {
+            required: true,
+            message: "请选择题卡规则",
+            trigger: "change"
+          }
+        ],
+        orgIds: [
+          {
+            required: true,
+            validator: (rule, value, callback) => {
+              if (value.length) {
+                callback();
+              } else {
+                callback(new Error("请选择适用学院"));
+              }
+            },
+            trigger: "change"
+          }
+        ]
+      },
+      // upload
+      uploadUrl: "/api/admin/common/file/upload",
+      uploadData: {
+        type: "UPLOAD"
+      }
+    };
+  },
+  methods: {
+    initData(val) {
+      this.modalForm = this.$objAssign(initModalForm, val);
+      if (val.id) {
+        this.modalForm.orgIds = val.orgs.map(item => item.id);
+        if (this.modalForm.createType !== "UPLOAD") return;
+        this.getAttachment();
+      } else {
+        this.modalForm.orgIds = [];
+        if (this.modalForm.createType !== "UPLOAD") return;
+        this.$nextTick(() => {
+          this.$refs.UploadFileView.setAttachmentName("");
+        });
+      }
+    },
+    async getAttachment() {
+      const data = await attachmentDetail(this.instance.attachmentId);
+      this.attachment = data;
+
+      this.$nextTick(() => {
+        this.$refs.UploadFileView.setAttachmentName(`${data.name}${data.type}`);
+      });
+    },
+    visibleChange() {
+      this.initData(this.instance);
+
+      this.$nextTick(() => {
+        this.$refs.modalFormComp.clearValidate();
+      });
+    },
+    cancel() {
+      this.modalIsShow = false;
+    },
+    open() {
+      this.modalIsShow = true;
+    },
+    async submit() {
+      const valid = await this.$refs.modalFormComp.validate().catch(() => {});
+      if (!valid) return;
+
+      if (this.isSubmit) return;
+      this.isSubmit = true;
+      let datas = {
+        ...this.modalForm
+      };
+      if (datas.type === "GENERIC") datas.classify = "CARD";
+      const data = await updateTemplate(datas).catch(() => {});
+      this.isSubmit = false;
+      if (!data) return;
+
+      this.$message.success("保存成功！");
+      this.$emit("modified");
+      this.cancel();
+    },
+    uplaodError(errorData) {
+      this.$notify.error({ title: "错误提示", message: errorData.message });
+    },
+    uploadSuccess(data) {
+      this.$message.success("上传成功！");
+
+      this.modalForm.attachmentId = data.id;
+      this.$refs.modalFormComp.validateField("attachmentId");
+    }
+  }
+};
+</script>

src/modules/base/components/ModifyTemplate.vue

@@ -3,7 +3,7 @@
     class="modify-template"
     :visible.sync="modalIsShow"
     :title="title"
-    top="10vh"
+    top="10px"
     width="600px"
     :close-on-click-modal="false"
     :close-on-press-escape="false"

src/modules/base/router.js

@@ -12,6 +12,7 @@ import PrintPlanPushManage from "./views/PrintPlanPushManage.vue";
 import FlowManage from "./views/FlowManage.vue";
 import ApproveRecordManage from "./views/ApproveRecordManage.vue";
 import SmsManage from "./views/SmsManage.vue";
+import CardManage from "./views/CardManage.vue";
 // dict
 import CampusManage from "./views/CampusManage.vue";
 import StudentManage from "./views/StudentManage.vue";
@@ -128,5 +129,10 @@ export default [
     path: "/base/clazz-simple-manage/:courseId?",
     name: "ClazzSimpleManage",
     component: ClazzSimpleManage
+  },
+  {
+    path: "/base/card-manage",
+    name: "CardManage",
+    component: CardManage
   }
 ];

src/modules/base/views/CardManage.vue

@@ -0,0 +1,219 @@
+<template>
+  <div class="card-manage">
+    <div class="part-box part-box-filter part-box-flex">
+      <el-form ref="FilterForm" label-position="left" label-width="85px" inline>
+        <template v-if="checkPrivilege('condition', 'condition')">
+          <el-form-item label="题卡名称：">
+            <el-input
+              v-model.trim="filter.name"
+              placeholder="名称"
+              clearable
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="创建方式：" label-width="90px">
+            <el-select
+              v-model="filter.createType"
+              style="width: 120px;"
+              placeholder="创建方式"
+              clearable
+            >
+              <el-option
+                v-for="(val, key) in CARD_CREATE_TYPE"
+                :key="key"
+                :value="key"
+                :label="val"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </template>
+        <el-form-item>
+          <el-button
+            v-if="checkPrivilege('button', 'select')"
+            type="primary"
+            @click="toPage(1)"
+            >查询</el-button
+          >
+        </el-form-item>
+      </el-form>
+      <div class="part-box-action">
+        <el-button
+          v-if="checkPrivilege('button', 'add')"
+          type="primary"
+          icon="el-icon-circle-plus-outline"
+          @click="toSelectCardCreateType"
+          >添加题卡</el-button
+        >
+      </div>
+    </div>
+    <div class="part-box part-box-pad">
+      <el-table ref="TableList" :data="cardList">
+        <el-table-column
+          type="index"
+          label="序号"
+          width="70"
+          :index="indexMethod"
+        ></el-table-column>
+        <el-table-column prop="name" label="题卡名称"></el-table-column>
+        <el-table-column prop="type" label="类型"></el-table-column>
+        <el-table-column prop="orgs" label="适用学院">
+          <template slot-scope="scope">
+            <more-text :data="scope.row.orgNames"></more-text>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createType" label="创建方式"></el-table-column>
+        <el-table-column prop="remark" label="备注">
+          <span slot-scope="scope">{{
+            scope.row.remark | defaultFieldFilter
+          }}</span>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" width="180">
+          <span slot-scope="scope">{{
+            scope.row.createTime | timestampFilter
+          }}</span>
+        </el-table-column>
+        <el-table-column class-name="action-column" label="操作" width="140">
+          <template slot-scope="scope">
+            <el-button
+              v-if="checkPrivilege('link', 'preview')"
+              class="btn-primary"
+              type="text"
+              @click="toPreview(scope.row)"
+              >查看</el-button
+            >
+            <el-button
+              v-if="checkPrivilege('link', 'edit')"
+              class="btn-primary"
+              type="text"
+              @click="toEdit(scope.row)"
+              >编辑</el-button
+            >
+            <el-button
+              v-if="checkPrivilege('link', 'delete')"
+              class="btn-danger"
+              type="text"
+              @click="toDelete(scope.row)"
+              >删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="part-page">
+        <el-pagination
+          background
+          layout="total,prev, pager, next"
+          :current-page="current"
+          :total="total"
+          :page-size="size"
+          @current-change="toPage"
+        >
+        </el-pagination>
+      </div>
+    </div>
+
+    <!-- card-create-type -->
+    <el-dialog
+      class="card-create-type"
+      :visible.sync="modalIsShow"
+      title="题卡创建方式"
+      top="10vh"
+      width="600px"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      append-to-body
+    >
+      <div class="card-types">
+        <div
+          v-for="(val, key) in CARD_CREATE_TYPE"
+          :key="key"
+          class="card-type"
+          @click="toAdd(key)"
+        >
+          {{ val }}
+        </div>
+      </div>
+      <div slot="footer"></div>
+    </el-dialog>
+    <!-- ModifyCardInfo -->
+    <modify-card-info
+      ref="ModifyCardInfo"
+      :instance="curCard"
+      @modified="getList"
+    ></modify-card-info>
+  </div>
+</template>
+
+<script>
+import { CARD_CREATE_TYPE } from "../../../constants/enumerate";
+import { cardListPage, deleteCard } from "../api";
+import ModifyCardInfo from "../components/ModifyCardInfo";
+
+export default {
+  name: "card-manage",
+  components: { ModifyCardInfo },
+  data() {
+    return {
+      filter: {
+        name: "",
+        createType: ""
+      },
+      current: 1,
+      size: this.GLOBAL.pageSize,
+      total: 0,
+      CARD_CREATE_TYPE,
+      cardList: [],
+      curCard: {},
+      // card-create-type dialog
+      modalIsShow: false,
+      editType: "ADD"
+    };
+  },
+  methods: {
+    async getList() {
+      if (!this.checkPrivilege("list", "list")) return;
+
+      const datas = {
+        ...this.filter,
+        pageNumber: this.current,
+        pageSize: this.size
+      };
+      const data = await cardListPage(datas);
+      this.cardList = data.records;
+      this.total = data.total;
+    },
+    toPage(page) {
+      this.current = page;
+      this.getList();
+    },
+    toAdd(createType) {
+      console.log(createType);
+      this.curCard = { createType };
+      this.modalIsShow = false;
+      setTimeout(() => {
+        this.$refs.ModifyCardInfo.open();
+      }, 200);
+    },
+    toSelectCardCreateType() {
+      this.modalIsShow = true;
+    },
+    toPreview(row) {
+      this.curCard = row;
+      this.$refs.ModifyRole.open();
+    },
+    toEdit(row) {
+      this.curCard = row;
+      this.$refs.ModifyRole.open();
+    },
+    toDelete(row) {
+      this.$confirm(`确定要删除题卡【${row.name}】吗?`, "提示", {
+        type: "warning"
+      })
+        .then(async () => {
+          await deleteCard(row.id);
+          this.$message.success("删除成功！");
+          this.deletePageLastItem();
+        })
+        .catch(() => {});
+    }
+  }
+};
+</script>