sdk类型管理

src/assets/css/index.css

@@ -661,8 +661,8 @@ border-radius:8px;
 
 .apaas_button .el-button--danger {
   color: #fff;
-  background-color: #e15260;
-  border-color: #e15260;
+  background-color: #ad3a4a;
+  border-color: #ad3a4a;
 }
 
 .apaas_button .el-button.is-disabled,
@@ -1194,4 +1194,7 @@ border-radius:8px;
 }
 .el-checkbox__input:hover .el-checkbox__inner {
   border-color: #515fe7;
+}
+.el-date-editor .el-range-input {
+  width: 36%;
 }
\ No newline at end of file

src/components/apass-list.vue

@@ -80,9 +80,12 @@
       </div>
       <div class="list-container" v-else>
         <list-table
+          ref="listTable"
           :header="listHeader"
           :data="listData"
           :padding-left="listPaddingLeft"
+          :select="listSelect"
+          @select="selectAction"
         ></list-table>
       </div>
 
@@ -146,6 +149,10 @@ export default {
       type: String,
       default: () => "请输入关键字",
     },
+    listSelect: {
+      type: Boolean,
+      default: false,
+    },
   },
   data: () => ({
     showListFilter: false,
@@ -223,6 +230,15 @@ export default {
         });
       }, 200);
     },
+    selectAction(selectedItems) {
+      this.$emit("list-select", selectedItems);
+    },
+    clearSelection() {
+      this.$refs.listTable.clearSelection();
+    },
+    setSelectedRow(row, flag) {
+      this.$refs.listTable.setSelectedRow(row, flag);
+    },
   },
   mounted() {
     this.initOtherFilter();

src/components/apass-table.vue

 <template>
   <div class="apass_table">
     <el-table
+      ref="apassTable"
       :data="data"
       @sort-change="sortChange"
       @row-click="rowClick"
+      @selection-change="selectAction"
       :row-class-name="rowClassName"
     >
       <el-table-column
         v-if="paddingLeft > 10"
         :width="paddingLeft - 10"
       ></el-table-column>
+      <el-table-column type="selection" width="80" align="center" v-if="select">
+        <!-- checkbox -->
+      </el-table-column>
       <el-table-column
         v-for="(item, index) in header"
         :label="item.label"
@@ -303,6 +308,10 @@ export default {
       type: Function,
       default: null,
     },
+    select: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -395,6 +404,15 @@ export default {
     leaveMoreActionList() {
       this.showMoreActionList = false;
     },
+    selectAction(selectedItems) {
+      this.$emit("select", selectedItems);
+    },
+    clearSelection() {
+      this.$refs.apassTable.clearSelection();
+    },
+    setSelectedRow(row, flag) {
+      this.$refs.apassTable.toggleRowSelection(row, flag);
+    },
   },
 };
 </script>

src/components/apass-upload.vue

+<template>
+  <el-upload
+    drag
+    action="/apaas/static/file/upload"
+    :data="{
+      directory: 'sdk',
+      uniqueCode: false,
+    }"
+    :file-list="fileList"
+    :before-upload="beforeUpload"
+    :on-success="uploadSuccess"
+  >
+    <i class="el-icon-upload"></i>
+    <div class="el-upload__text">
+      <p>将文件拖到此处，或<em>点击上传</em></p>
+      <p class="upload_tip" v-if="tip" v-text="tip"></p>
+    </div>
+  </el-upload>
+</template>
+
+<script>
+export default {
+  model: {
+    prop: "url",
+    event: "change",
+  },
+  props: {
+    url: {
+      type: String,
+      default: "",
+    },
+    tip: {
+      type: String,
+      default: "",
+    },
+  },
+  computed: {
+    fileList() {
+      let list = [];
+
+      if (this.url) {
+        let path = this.url.split("/");
+
+        list = [
+          {
+            name: path[path.length - 1],
+            url: this.url,
+          },
+        ];
+      }
+
+      return list;
+    },
+  },
+  methods: {
+    getFileType(fileName) {
+      let startIndex = fileName.lastIndexOf(".");
+
+      if (startIndex != -1) {
+        return fileName
+          .substring(startIndex + 1, fileName.length)
+          .toLowerCase();
+      } else {
+        return "";
+      }
+    },
+    beforeUpload(file) {
+      const filtType = this.getFileType(file.name);
+
+      if (filtType === "rar" || filtType === "zip") {
+        return true;
+      } else {
+        this.$message.error("仅支持rar和zip格式!");
+        return false;
+      }
+    },
+    uploadSuccess({ data }) {
+      this.$emit("change", data);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.upload_tip {
+  font-size: 12px;
+  line-height: 20px;
+  color: #a9aec0;
+}
+</style>

src/pages/technical-support/sdk-manage/type/index.vue

 <template>
-  <div class="doc_manage_container">
+  <div class="list_container">
     <apass-list
       ref="list"
       search-placeholder="请输入关键字"
@@ -8,7 +8,9 @@
       :list-total="listTotal"
       :list-header="listHeader"
       :list-data="listData"
+      :list-select="true"
       @list-action="init"
+      @list-select="selectAction"
     >
       <el-breadcrumb separator="/" slot="breadcrumb">
         <el-breadcrumb-item to="/technical_support">
@@ -32,8 +34,8 @@
                 <el-option
                   v-for="(item, index) in types"
                   :key="'top_type_' + index"
-                  :label="item.label"
-                  :value="item.value"
+                  :label="item.style_name"
+                  :value="item.id"
                 >
                 </el-option>
               </el-select>
@@ -63,20 +65,71 @@
       </template>
 
       <div class="main_top_action apaas_button" slot="main-top">
-        <el-button class="delete_btn" type="danger" @click="deleteSlectedItem">
+        <el-button class="delete_btn" type="danger" @click="deleteSlection">
           批量删除
         </el-button>
         <span class="selected_text">
           已选择
-          <span>3</span>
+          <span>{{ selection.length }}</span>
           项
         </span>
-        <a class="clean_btn" @click.prevent="cleanSlectedItem">清空</a>
+        <a class="clean_btn" @click.prevent="clearSelection">清空</a>
         <el-button class="add_btn" type="primary" @click="addNewSdk">
           新增SDK类型
         </el-button>
       </div>
     </apass-list>
+
+    <apass-dialog
+      ref="detailDialog"
+      :title="detailForm.type === 0 ? '新增' : '修改'"
+    >
+      <div class="add_content" slot="content">
+        <el-form ref="addForm" :model="detailForm" :rules="detailFormRules">
+          <el-form-item
+            label="SDK类型"
+            prop="style_name"
+            class="inline_form_item"
+          >
+            <el-input
+              v-model="detailForm.style_name"
+              placeholder="请填写SDK类型名称，如Java SDK"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="版本号" prop="version" class="inline_form_item">
+            <el-input
+              v-model="detailForm.version"
+              placeholder="版本号"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="SDK包上传" prop="file_url">
+            <!-- <el-input
+              v-model="detailForm.file_url"
+              placeholder="支持扩展名：.rar .zip"
+            ></el-input> -->
+            <apass-upload
+              v-model="detailForm.file_url"
+              tip="支持扩展名：.rar .zip"
+            ></apass-upload>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <template slot="action">
+        <el-button type="defalut" size="mini" @click="detailCancelAction">
+          取消
+        </el-button>
+        <el-button type="primary" size="mini" @click="detailSubmitAction">
+          确定
+        </el-button>
+      </template>
+    </apass-dialog>
+
+    <apass-dialog
+      ref="deleteDialog"
+      :msg="deleteDialogInfo.msg"
+      :submit="deleteDialogInfo.submit"
+    ></apass-dialog>
   </div>
 </template>
 
@@ -84,19 +137,66 @@
 import helper from "@/services/helper.js";
 import apassList from "@/components/apass-list";
 import apassDialog from "@/components/apass-dialog";
+import apassUpload from "@/components/apass-upload";
 import showMoreFilter from "@/components/show-more-filter";
 
 export default {
   components: {
     apassList,
     apassDialog,
+    apassUpload,
     showMoreFilter,
   },
   data() {
     return {
-      paddingLeft: 25,
+      paddingLeft: 0,
       listTotal: 0,
-      listHeader: [{}],
+      listHeader: [
+        {
+          label: "SDK类型",
+          prop: "style_name",
+          type: "button",
+          width: 240,
+        },
+        {
+          label: "版本号",
+          prop: "version",
+          align: "center",
+        },
+        {
+          label: "是否提供SDK包下载",
+          prop: "is_sdk",
+          align: "center",
+        },
+        {
+          label: "操作人",
+          prop: "user_name",
+          align: "center",
+        },
+        {
+          label: "最后更新时间",
+          prop: "updated",
+          getText: ({ updated }) => this.getTimeText(updated || ""),
+          align: "center",
+        },
+        {
+          label: "操作",
+          type: "buttons",
+          align: "center",
+          width: 240,
+          actionList: [
+            {
+              label: "修改",
+              callback: this.editItem,
+            },
+            {
+              label: "删除",
+              callback: this.deleteItem,
+              class: "warn",
+            },
+          ],
+        },
+      ],
       listData: [],
       topFilter: {
         type: "",
@@ -104,6 +204,24 @@ export default {
       },
       types: [],
       tempFilter: {},
+      detailForm: {
+        type: 0, // 0：新增 1：修改
+        style_name: "",
+        version: "",
+        file_url: "",
+      },
+      detailFormRules: {
+        style_name: [
+          { required: true, message: "请填写SDK类型名称", trigger: "blur" },
+          { max: 20, message: "长度应小于20个字符", trigger: "change" },
+        ],
+      },
+      deleteDialogInfo: {
+        msg: "",
+        submit: null,
+      },
+      saveSection: false,
+      selection: [],
     };
   },
   methods: {
@@ -114,12 +232,44 @@ export default {
       };
 
       this.tempFilter = filter;
+      this.saveSection = true;
+
+      this.$http
+        .get("/apaas/support/sdk/styles/list", {
+          params: {
+            style: fullFilter.type,
+            start: fullFilter.time && fullFilter.time[0],
+            end: fullFilter.time && fullFilter.time[1],
+            limit: fullFilter.size,
+            page: fullFilter.page,
+          },
+        })
+        .then(({ data }) => {
+          if (data.success === 1) {
+            this.listTotal = data.total;
+            this.listData = data.data || [];
+
+            this.$nextTick(() => {
+              this.selection.forEach((item) => {
+                let target = this.listData.find((v) => v.id === item.id);
+
+                if (target) {
+                  this.setCurrentRow(target, true);
+                }
+              });
+              this.saveSection = false;
+            });
+          }
+        });
 
-      console.log(fullFilter);
+      this.$http.get("/apaas/support/sdk/styleNames/list").then(({ data }) => {
+        if (data.success === 1) {
+          this.types = data.data || [];
+        }
+      });
     },
     topFilterClear() {
       this.topFilter = {
-        name: "",
         type: "",
         time: "",
       };
@@ -131,38 +281,191 @@ export default {
     refreshPage() {
       this.$refs.list.resetCurrentPage();
     },
-    deleteSlectedItem() {
-      console.log("deleteSlectedItem");
+    deleteSlection() {
+      this.deleteDialogInfo.msg = `确认删除要删除所选项吗？`;
+      this.deleteDialogInfo.submit = () => {
+        this.deleteRequest(this.selection.map((row) => row.id));
+      };
+      this.$refs.deleteDialog.show();
+    },
+    clearSelection() {
+      this.$refs.list.clearSelection();
     },
-    cleanSlectedItem() {
-      console.log("cleanSlectedItem");
+    setCurrentRow(row, flag) {
+      this.$refs.list.setSelectedRow(row, flag);
     },
     addNewSdk() {
-      console.log("addNewSdk");
+      this.detailForm = {
+        type: 0,
+        style_name: "",
+        version: "",
+        file_url: "",
+      };
+      this.$refs.detailDialog.show();
+    },
+    detailCancelAction() {
+      this.$refs.detailDialog.hide();
+    },
+    detailSubmitAction() {
+      if (this.detailForm.type === 0) {
+        this.$http
+          .post("/apaas/support/sdk/styles/create", {
+            style_name: this.detailForm.style_name,
+            version: this.detailForm.version,
+            file_url: this.detailForm.file_url,
+          })
+          .then(({ data }) => {
+            if (data.success === 1) {
+              this.$message.success("新增成功");
+              this.refreshPage();
+              this.$refs.detailDialog.hide();
+            } else {
+              this.$message.error("新增失败");
+            }
+          })
+          .catch((error) => {
+            console.log(error);
+            this.$message.error("新增失败");
+          });
+      } else {
+        this.$http
+          .put("/apaas/support/sdk/styles/put", {
+            id: this.detailForm.id,
+            style_name: this.detailForm.style_name,
+            version: this.detailForm.version,
+            file_url: this.detailForm.file_url,
+          })
+          .then(({ data }) => {
+            if (data.success === 1) {
+              this.$message.success("修改成功");
+              this.refreshPage();
+              this.$refs.detailDialog.hide();
+            } else {
+              this.$message.error("修改失败");
+            }
+          })
+          .catch((error) => {
+            console.log(error);
+            this.$message.error("修改失败");
+          });
+      }
+    },
+    editItem(item) {
+      this.detailForm = {
+        type: 1,
+        id: item.id,
+        style_name: item.style_name,
+        version: item.version,
+        file_url: item.file_url,
+      };
+      /* this.$http
+        .get("/apaas/support/sdk/styles/detail", {
+          params: {
+            id: item.id,
+          },
+        })
+        .then(({ data }) => {
+          if (data.success === 1) {
+            this.detailForm = data.data;
+          }
+        }); */
+      this.$refs.detailDialog.show();
+    },
+    deleteItem(item) {
+      this.deleteDialogInfo.msg = `确认删除${item.style_name}吗？`;
+      this.deleteDialogInfo.submit = () => {
+        this.deleteRequest([item.id]);
+      };
+      this.$refs.deleteDialog.show();
+    },
+    deleteRequest(ids) {
+      this.$http
+        .delete("/apaas/support/sdk/styles/delete", {
+          body: {
+            ids: ids,
+          },
+        })
+        .then(({ data }) => {
+          if (data.success === 1) {
+            this.$message.success("删除成功");
+            this.selection = [];
+            this.refreshPage();
+          } else {
+            this.$message.error("删除失败");
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+          this.$message.error("删除失败");
+        });
+    },
+    getTimeText(time) {
+      return helper.dateStringTransform(time);
+    },
+    selectAction(values) {
+      if (this.saveSection) {
+        return;
+      }
+
+      let cleanPage = values.length === 0; // 是否清空当前页所有选中
+      let selection = [...this.selection];
+
+      if (cleanPage) {
+        selection = selection.filter((item) => {
+          return !this.listData.find((v) => {
+            return v.id === item.id;
+          });
+        });
+      } else {
+        selection.push(...values);
+      }
+
+      this.selection = selection;
     },
   },
 };
 </script>
 
 <style>
+.list_container {
+  height: 100%;
+}
 .main_top_action {
   display: flex;
   justify-content: flex-start;
   align-items: center;
 }
-.main_top_action .delete_btn {
-}
 .main_top_action .selected_text {
+  font-size: 14px;
+  color: #8890a7;
   margin-left: 30px;
 }
+.main_top_action .selected_text > span {
+  font-weight: bold;
+  color: #242c43;
+  margin: 0 3px;
+}
 .main_top_action .clean_btn {
   font-size: 14px;
   line-height: 24px;
   color: #2b4695;
   text-decoration: underline;
+  cursor: pointer;
+  user-select: none;
   margin-left: 30px;
 }
 .main_top_action .add_btn {
   margin-left: auto;
 }
+.el-form {
+  font-size: 0;
+}
+.inline_form_item {
+  display: inline-block;
+  vertical-align: middle;
+  width: calc(50% - 10px);
+}
+.inline_form_item + .inline_form_item {
+  margin-left: 20px;
+}
 </style>