sync

src/api/system.js

@@ -30,9 +30,9 @@ export function pushDeleteSystem(id) {
   })
 }
 
-export function pushSaveSystem(data) {
+export function pushSaveSystem(action, data) {
   return request({
-    url: 'app/add',
+    url: `app/${action}`,
     method: 'post',
     data: data
   })

src/components/Upload/UploadFile.vue

@@ -4,13 +4,13 @@
       :ref="refName"
       :name="aliasName"
       :show-file-list="showFileList"
-      list-type="picture"
       action=""
       :http-request="httpRequest"
-      :on-success="onSuccess"
-      :on-error="onError"
+      :on-change="onChange"
+      v-bind="$attrs"
     >
       <el-button icon="el-icon-upload2">{{ btnText }}</el-button>
+      <slot />
     </el-upload>
   </div>
 </template>
@@ -31,15 +31,7 @@ export default {
     },
     showFileList: {
       type: Boolean,
-      default: false
-    },
-    onSuccess: {
-      type: Function,
-      default() {}
-    },
-    onError: {
-      type: Function,
-      default() {}
+      debugger: false
     }
   },
   data() {
@@ -61,6 +53,11 @@ export default {
       this.aliasName += _uploadId_
       _uploadId_++
     },
+    onChange(file, fileList) {
+      if (file.status === 'ready') {
+        fileList.splice(0, fileList.length - 1)
+      }
+    },
     httpRequest(options) {
       const formData = new FormData()
       formData.append('file', options.file)

src/styles/index.scss

@@ -232,4 +232,8 @@ aside {
   .el-dialog__body {
     padding: 0;
   }
+}
+
+.main-edit-dialog {
+  min-width: 800px;
 }

src/views/system/components/SystemDetail.vue

@@ -6,84 +6,96 @@
       :close-on-press-escape="true"
       :close-on-click-modal="false"
       :show-close="false"
+      destroy-on-close
       custom-class="main-edit-dialog"
       :title="title"
     >
-      <el-form ref="editForm" :model="formData" label-width="100px">
+      <el-form :ref="formName" :model="formData" :rules="isView ? {} : rules" label-width="100px">
         <el-row>
           <el-col :span="12">
-            <el-form-item label="Type" required>
-              <el-select v-model="formData.appType" placeholder="placeholder">
+            <el-form-item prop="appType" label="Type">
+              <el-select v-if="!isView" v-model="formData.appType" placeholder="Please select">
                 <el-option v-for="item in typeData" :key="item.value" :label="item.label" :value="item.value" />
               </el-select>
+              <span v-else>{{ formData.appType }}</span>
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="Name" required>
-              <el-input v-model="formData.systemName" />
+            <el-form-item prop="systemName" label="Name">
+              <el-input v-if="!isView" v-model="formData.systemName" />
+              <div v-else>{{ formData.systemName }}</div>
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="12">
-            <el-form-item label="Code" required>
-              <el-input v-model="formData.systemNumber" />
+            <el-form-item prop="systemNumber" label="Code">
+              <el-input v-if="!isView" v-model="formData.systemNumber" />
+              <span v-else>{{ formData.systemNumber }}</span>
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="Alias" required>
-              <el-input v-model="formData.shortName" />
+            <el-form-item prop="shortName" label="Alias">
+              <el-input v-if="!isView" v-model="formData.shortName" />
+              <span v-else>{{ formData.shortName }}</span>
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="12">
-            <el-form-item label="Dept" required>
-              <el-select v-model="formData.deptName" placeholder="placeholder">
+            <el-form-item prop="deptName" label="Dept">
+              <el-select v-if="!isView" v-model="formData.deptName" placeholder="placeholder">
                 <el-option v-for="item in orgData" :key="item.value" :label="item.label" :value="item.value" />
               </el-select>
+              <span v-else>{{ formData.deptName }}</span>
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="Url" required>
-              <el-input v-model="formData.url" />
+            <el-form-item prop="url" label="Url">
+              <el-input v-if="!isView" v-model="formData.url" />
+              <span v-else>{{ formData.url }}</span>
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="12">
-            <el-form-item label="Active" required>
-              <el-select v-model="formData.activeFlag" placeholder="placeholder">
+            <el-form-item prop="activeFlag" label="Active">
+              <el-select v-if="!isView" v-model="formData.activeFlag" placeholder="placeholder">
                 <el-option v-for="item in activeFlagData" :key="item.value" :label="item.label" :value="item.value" />
               </el-select>
+              <span v-else>{{ formData.activeFlag }}</span>
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="Category">
-              <el-select v-model="formData.policeCategory" placeholder="placeholder">
+            <el-form-item prop="policeCategory" label="Category">
+              <el-select v-if="!isView" v-model="formData.policeCategory" placeholder="placeholder">
                 <el-option v-for="item in policeCategoryData" :key="item.value" :label="item.label" :value="item.value" />
               </el-select>
+              <span v-else>{{ formData.policeCategory }}</span>
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="12">
-            <el-form-item label="label" required>
-              <upload-file file-type="1" show-file-list :on-success="uploadSuccess" :on-error="uploadError" />
-              <el-input v-model="formData.icon" />
+            <el-form-item prop="icon" label="Icon" style="height: 100px;">
+              <upload-file v-if="!isView" file-type="1" :on-success="uploadSuccess" :on-error="uploadError" />
+              <el-input v-model="formData.icon" type="hidden" style="display:none" />
+              <div v-if="!isNull(formData.icon)">
+                <i class="upload-success el-icon-circle-check" />{{ fileName }}
+              </div>
             </el-form-item>
           </el-col>
         </el-row>
       </el-form>
       <div slot="footer">
         <el-button @click="close">Cancel</el-button>
-        <el-button v-if="routeType !== 'VIEW'" type="primary" @click="saveSystem('editForm')">Confirm</el-button>
+        <el-button v-if="!isView" type="primary" @click="saveSystem">Confirm</el-button>
       </div>
     </el-dialog>
   </div>
 </template>
 <script>
-import { isObject } from '@/utils/convert'
+import { isNull, isObject } from '@/utils/convert'
 
 import { pushSaveSystem } from '@/api/system'
 
@@ -103,22 +115,52 @@ export default {
     return {
       // dialog
       visible: false,
-      routeType: '',
+      isView: true,
+      type: '',
       title: 'Edit',
+      formName: 'editForm',
       formData: {
         id: null,
         appType: null,
         systemName: '',
         systemNumber: '',
-        shortName: '',
+        shortName: null,
         deptName: '',
         url: '',
         activeFlag: '',
         policeCategory: '',
-        icon: ''
+        icon: null
       },
+      rules: {
+        appType: [
+          { required: true, message: '请选择应用类型', trigger: 'change' }
+        ],
+        systemName: [
+          { required: true, message: '请输入应用名称', trigger: 'blur' }
+        ],
+        systemNumber: [
+          { required: true, message: '请输入应用编号', trigger: 'blur' }
+        ],
+        shortName: [
+          { required: true, message: '请输入应用简称', trigger: 'blur' }
+        ],
+        deptName: [
+          { required: true, message: '请输入应用事权单位名称', trigger: 'blur' }
+        ],
+        url: [
+          { type: 'url', required: true, message: '请输入应用访问地址', trigger: 'blur' }
+        ],
+        activeFlag: [
+          { required: true, message: '请选择应用在用标识', trigger: 'change' }
+        ],
+        icon: [
+          { required: true, message: '请上传应用图标', trigger: 'change' }
+        ]
+      },
+      fileName: '',
+      action: 'add',
       // select:
-      orgData: [],
+      orgData: [{ value: '1', label: 'Test1' }, { value: '0', label: 'Test0' }],
       policeCategoryData: [],
       activeFlagData: [{ value: '1', label: 'Active' }, { value: '0', label: 'Deactive' }],
       // others
@@ -133,7 +175,8 @@ export default {
   methods: {
     // Upload
     uploadSuccess(data) {
-      this.formData['icon'] = data.url
+      this.$set(this.formData, 'icon', data.url)
+      this.fileName = data.fileName + '.' + data.extension
     },
     uploadError(error) {
       this.$message.error({
@@ -147,21 +190,40 @@ export default {
      * 加载dialog
      */
     open(type, data) {
-      this.routeType = type
-      this.title = type === 'ADD' ? 'Add' : type === 'VIEW' ? 'View' : 'Edit'
-      this.formData = isObject(data) ? data : { 'appType': '', 'systemName': '', 'icon': '' }
+      if (type === 'ADD') {
+        this.title = 'Add'
+        this.isView = false
+        this.action = 'add'
+        if (this.type !== 'ADD') {
+          data = {}
+        }
+      } else if (type === 'EDIT') {
+        this.title = 'Edit'
+        this.isView = false
+        this.action = 'update'
+      } else {
+        this.title = 'View'
+        this.isView = true
+      }
+      this.type = type
+      if (isObject(data)) {
+        Object.keys(this.formData).forEach(key => {
+          this.formData[key] = data[key]
+        })
+      }
       this.visible = true
     },
     close() {
       this.visible = false
     },
-    saveSystem(formName) {
-      this.$refs[formName].validate((valid) => {
+    saveSystem() {
+      this.$refs[this.formName].validate((valid) => {
         if (valid) {
           this.loading = true
-          pushSaveSystem(this.formData).then(res => {
-            this.loading = false
+          pushSaveSystem(this.action, this.formData).then(res => {
+            this.$refs[this.formName].resetFields()
             this.visible = false
+            this.loading = false
             this.$message({
               type: 'success',
               message: 'Save Successfully!'
@@ -178,131 +240,20 @@ export default {
           })
         }
       })
+    },
+    isNull(obj) {
+      return isNull(obj)
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.drag-container {
-  display: flex;
-  justify-content: center;
-
-  .drag-left, .drag-right {
-    width: 50%;
-    padding: 0 0 20px 20px;
-    max-height: 560px;
-  }
-
-  .drag-left {
-    background-color: #F8F9F9;
-    position: relative;
-
-    .page {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      text-align: center;
+.main-edit-dialog {
 
-      ::v-deep {
-        .btn-prev, .btn-next, .el-pager li{
-          background-color: transparent;
-        }
-      }
-    }
-  }
-
-  .drag-right {
-    .my-scroll-box {
-      // 48 = filter-title + filter-tip - drag-right.margin-bottom
-      height: calc(100% - 36px);
-      margin-top: -2px;
-    }
-
-    ::v-deep {
-      .el-scrollbar__wrap{
-        overflow-x: hidden;
-        padding-top: 2px;
-      }
-      .el-scrollbar__bar.is-horizontal {
-        display: none;
-      }
-    }
-  }
-
-  .list-filter {
-    height: 56px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding-right: 20px;
-
-    .el-input {
-      width: 250px;
-    }
-  }
-
-  .filter-title {
-    font-size: 14px;
-    color: rgba(0,0,0,0.85);
-  }
-
-  .filter-tip {
-    font-size: 12px;
-    color: rgba(0,0,0,0.65);
-  }
-
-  .drag-item-box {
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-  .drag-item {
-    width: 150px;
-    height: 110px;
-    border: 1px solid rgba(0,0,0,0.09);
-    margin-bottom: 10px;
-    margin-right: 20px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    border-radius: 10px;
-    position: relative;
-    cursor: move;
-    cursor: -webkit-grabbing;
-
-    .handle-icon {
-      display: inline-block;
-      position: absolute;
-      top: -3px;
-      right: -7px;
-      border-radius: 50%;
-      background-color: #FF0000;
-      color: #FFFFFF;
-      cursor: pointer;
-      z-index: 100;
-    }
-
-    &.filtered {
-      cursor: pointer;
-
-      .el-icon-plus {
-        display: none;
-      }
-    }
-
-    .item-system {
-      text-align: center;
-      width: 130px;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-      font-size: 14px;
-      color: rgba(0,0,0,0.45);
-      margin-top: 10px
-    }
+  .upload-success {
+    color: #13ce66;
+    margin-right: 5px;
   }
 }
 </style>

src/views/system/index.vue

@@ -25,16 +25,6 @@
       </div>
       <div class="list-button">
         <el-button type="primary" @click="showEdit('ADD')">Add</el-button>
-        <!-- <el-button type="primary">Upload</el-button> -->
-        <!-- <el-upload
-          :action="uploadExcel"
-          :headers="uploadHeader"
-          :show-file-list="false"
-          :before-upload="beforeUploadExcel"
-          :on-success="fetchTableDetil"
-          :on-error="uploadError"
-          class="upload-btn"
-        > -->
         <el-upload action="" class="upload-btn">
           <el-button>Upload</el-button>
         </el-upload>