feat: 应用版本管理页面的添加

src/common/components/element-ui.js

@@ -37,6 +37,7 @@ import {
   ColorPicker,
   CheckboxGroup,
   Popover,
+  Upload
 } from 'element-ui'
 
 const components = [
@@ -73,6 +74,7 @@ const components = [
   ColorPicker,
   CheckboxGroup,
   Popover,
+  Upload
 ]
 
 export default {

src/router/index.js

@@ -123,6 +123,12 @@ const routes = [
         name: 'system_management',
         meta: { title: '丢单管理' },
       },
+      {
+        path: '/saas/production /assistant/manage',
+        component: () => import('@/views/production/AssistantManage.vue'),
+        name: 'production_assistant_manage',
+        meta: { title: '应用版本管理' },
+      }
     ],
   },
 ]

src/views/home/navMenu.vue

@@ -289,7 +289,15 @@ export default {
               children: []
             },
           ]
-        }
+        },
+        {
+          id: 7,
+          path: '',
+          label: '应用版本管理',
+          icon: 'el-icon-menu',
+          index: '/saas/production /assistant/manage',
+          children: []
+        },
       ],
       dialogVisible: false,
       oldPwd: '',

src/views/production/AssistantManage.vue

+<template>
+  <div class='system-menu card'>
+    <div class='header'>
+      <el-form
+        size='mini'
+        :inline='true'
+        label-width='80px'
+      >
+        <el-form-item label>
+          <el-button
+            type='primary'
+            @click='showDialog({ id: 0 }, 2)'
+          >
+            新增
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class='table-wrap' v-loading='loading'>
+      <table-view
+        :tableColumns='tableColumns'
+        rowKey='id'
+        :serialNumber='true'
+        :treeConfig="{
+          children: 'children',
+          reserve: true,
+        }"
+        :sourceData='sourceData'
+      ></table-view>
+    </div>
+
+    <el-dialog
+      title="新增"
+      :visible.sync='dialogVisible'
+      :close-on-click-modal='false'
+      :before-close='beforeClose'
+      width='1000px'
+    >
+      <el-form
+        size='mini'
+        :inline='true'
+        label-width='120px'
+        :rules='rules'
+        ref='editForm'
+        :model='editForm'
+      >
+        <el-form-item prop="title" label="菜单名称">
+          <el-input class="item_width" v-model="editForm.title" placeholder="请输入更新标题"></el-input>
+        </el-form-item>
+        <el-form-item prop="version" label="版本号">
+          <el-input class="item_width" v-model="editForm.version" placeholder="请输入版本号"></el-input>
+        </el-form-item>
+        <el-form-item prop="content" label="更新内容">
+          <el-input class="item_width" v-model="editForm.content" placeholder="请输入更新内容"></el-input>
+        </el-form-item>
+        <el-form-item prop="forcedUpdate" label="是否强制更新">
+          <el-radio-group class="item_width" v-model="editForm.forcedUpdate">
+            <el-radio :label="0">否</el-radio>
+            <el-radio :label="1">是</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item prop="businessType" label="应用软件名称">
+          <el-input class="item_width" v-model="editForm.businessType" disabled></el-input>
+        </el-form-item>
+        <!-- 上传多个app文件 -->
+        <el-form-item label="上传文件">
+          <el-upload
+            class="upload-file"
+            action="/"
+            :on-success="handleSuccess"
+            :on-remove="handleRemove"
+            :file-list="fileList"
+            :auto-upload="false"
+            list-type="text"
+            accept=".apk,.ipa"
+          >
+            <i class="el-icon-plus"></i>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+      <div slot='footer'>
+        <el-button size='small' @click='clone'
+        >取 消
+        </el-button
+        >
+        <el-button
+          size='small'
+          type='primary'
+          @click='submit'
+        >保 存
+        </el-button
+        >
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import tableView from '@/common/components/base/tableView.vue'
+
+export default {
+  name: 'saasMenu',
+  components: {
+    tableView,
+  },
+  data() {
+    return {
+      loading: false,
+      sourceData: [
+       { id: 1, version: '1.1.2', title: '更新字段1', content: '内容', forcedUpdate: 0, businessType: 'production_assistant', fileList: [] },
+       { id: 2, version: '1.1.2', title: '更新字段2', content: '内容', forcedUpdate: 1, businessType: 'production_assistant', fileList: [] }
+      ],
+      dialogVisible: false,
+      editForm: {
+        version: '',
+        title: '',
+        content: '',
+        forcedUpdate: 0,
+        businessType: 'production_assistant'
+      },
+      fileList: [],
+      rules: {
+        // 自定义版本号的校验规则
+        version: [
+          { required: true, message: '请输入版本号', trigger: 'blur' },
+          {
+            validator: (rule, value, callback) => {
+              if (!/^\d+\.\d+\.\d+$/.test(value)) {
+                callback(new Error('版本号格式不正确'))
+              } else {
+                callback()
+              }
+            },
+            trigger: 'blur',
+          },
+        ],
+        title: [
+          { required: true, message: '请输入更新标题', trigger: 'blur' },
+        ],
+        content: [
+          { required: true, message: '请输入更新内容', trigger: 'blur' },
+        ],
+      }
+    }
+  },
+  computed: {
+    tableColumns() {
+      return [
+        {
+          label: '更新标题',
+          key: 'title',
+          width: '',
+        },
+        {
+          label: '版本号',
+          key: 'version',
+          width: ''
+        },
+        {
+          label: '更新内容',
+          key: 'content',
+          width: '',
+        },
+        {
+          label: ' 是否强制更新',
+          key: 'forcedUpdate',
+          width: '',
+          render: item => {
+            return item.forcedUpdate === 1 ? '是' : '否'
+          }
+        },
+        {
+          label: '应用软件名称',
+          key: 'businessType',
+          width: '',
+          render: item => {
+            return item ? '生产助手' : ''
+          }
+        },
+        {
+          label: '操作',
+          key: '',
+          width: '',
+          align: 'left',
+          render: item => (
+            <div>
+              <el-button
+                size='mini'
+                type='text'
+                onClick={() => this.remove(item)}
+              >
+                删除
+              </el-button>
+            </div>
+          ),
+        },
+      ]
+    },
+  },
+  mounted() {
+  },
+  methods: {
+    showDialog() {
+      this.dialogVisible = true
+    },
+    resetForm() {
+      for (const key in this.editForm) {
+        if (key === 'enable') continue
+        this.editForm[key] = ''
+      }
+    },
+    clone() {
+      this.resetForm()
+      this.dialogVisible = false
+    },
+    submit() {
+      // 验证表单
+      this.$refs.editForm.validate(valid => {
+        if (valid) {
+          // 提交表单
+          console.log('验证表单：>>> ', this.editForm, '\n上传的文件列表:>>> ', this.fileList)
+          if (this.fileList?.length === 0) {
+            return this.$message({
+              type: 'warning',
+              message: '请上传文件!',
+            })
+          }
+          this.$message({
+            type: 'success',
+            message: '保存成功!',
+          })
+          this.resetForm()
+          this.dialogVisible = false
+        }
+      })
+    },
+    beforeClose(done) {
+      this.resetForm()
+      done()
+    },
+    remove({ id }) {
+        this.$confirm('是否删除该数据', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+        }).then(() => {
+            // 删除的相关操作
+            this.sourceData = this.sourceData.filter(item => item.id !== id)
+            this.$message({
+              type: 'success',
+              message: '删除成功!',
+            })
+        })
+    },
+    handleSuccess() {
+      console.log('上传成功')
+      this.$message({
+        type: 'success',
+        message: '上传成功!',
+      })
+    },
+    handleRemove() {
+      this.$message({
+        type: 'success',
+        message: '删除成功!',
+      })
+    },
+  },
+}
+</script>
+<style lang='scss' scoped>
+.system-menu {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 10px 20px 0;
+  overflow: hidden;
+  .item_width {
+    width: 180px;
+  }
+  .upload-file .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .upload-file .el-upload:hover {
+    border-color: #409EFF;
+  }
+  .upload-file-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
+}
+.table-wrap {
+  flex: 1;
+}
+
+.radioGroup {
+  .el-radio {
+    margin-right: 15px !important;
+  }
+}
+
+</style>