sync

src/views/info/components/DetailEdit.vue

@@ -0,0 +1,360 @@
+<template>
+  <div>
+    <el-dialog
+      v-loading="loading"
+      :visible.sync="visible"
+      :close-on-press-escape="true"
+      :close-on-click-modal="false"
+      :show-close="false"
+      custom-class="main-edit-dialog"
+      :title="title"
+    >
+      <el-form :ref="formName" :model="formData" :rules="isView ? {} : rules" label-width="120px" class="dialog-form">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item prop="appType" label="应用类型">
+              <el-select v-if="!isView" v-model="formData.appType" placeholder="请选择">
+                <el-option v-for="item in typeData" :key="item.id" :label="item.label" :value="item.id" />
+              </el-select>
+              <span v-else>{{ formatDictData('system_type', formData.appType) }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="systemName" label="应用名称">
+              <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 prop="systemNumber" label="应用编号">
+              <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 prop="shortName" label="应用简称">
+              <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 prop="deptName" label="事权单位名称">
+              <tree-select
+                v-if="!isView"
+                :props="selectTreeProps"
+                :accordion="true"
+                :value="defaultTreeId"
+                :tree-data="deptData"
+                @getValue="getSelectValue"
+              />
+              <span v-else> {{ formData.deptName }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="url" label="应用访问地址">
+              <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 prop="activeFlag" label="应用在用标识">
+              <el-select v-if="!isView" v-model="formData.activeFlag" placeholder="请选择">
+                <el-option v-for="item in activeFlagData" :key="item.id" :label="item.label" :value="item.id" />
+              </el-select>
+              <span v-else>{{ formatDictData('active_type',formData.activeFlag) }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="policeCategory" label="警种分类">
+              <el-select v-if="!isView" v-model="formData.policeCategory" placeholder="请选择">
+                <el-option v-for="item in policeCategoryData" :key="item.id" :label="item.label" :value="item.id" />
+              </el-select>
+              <span v-else>{{ formData.policeCategory }}</span>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item prop="icon" label="应用图标" style="height: 100px;">
+              <div v-if="!isView">
+                <upload-file :file-type="formData.appType" :on-success="uploadSuccess" :on-error="uploadError" />
+                <span style="display:none">{{ formData.icon }} </span>
+                <div v-if="!isNull(fileName)">
+                  <i class="upload-success el-icon-circle-check" />{{ fileName }}
+                </div>
+              </div>
+              <div v-else>
+                <el-avatar :size="56" :src="formData.icon | formatImgUrl" />
+              </div>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">取消</el-button>
+        <el-button v-if="!isView" type="primary" @click="save">确定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { isNull, isObject, formatDictData } from '@/utils/convert'
+
+import { pushSaveSystem } from '@/api/system'
+import { getDeptRootData, getDeptChildren, getDeptTreeData } from '@/api/dept'
+
+import UploadFile from '@/components/Upload/UploadFile'
+import TreeSelect from '@/components/Select/TreeSelect'
+
+export default {
+  components: { UploadFile, TreeSelect },
+  props: {
+    typeData: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      // dialog
+      visible: false,
+      isView: true,
+      viewType: 'ADD',
+      title: 'Edit',
+      formName: 'editForm',
+      formData: {
+        id: null,
+        appType: null,
+        systemName: '',
+        systemNumber: '',
+        shortName: null,
+        deptName: '',
+        url: '',
+        activeFlag: '',
+        policeCategory: '',
+        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:
+      selectTreeProps: {
+        // 配置项（必选）
+        nodeKey: 'shortName',
+        label: 'shortName',
+        value: 'shortName',
+        children: 'children'
+        // disabled:true
+      },
+      defaultTreeId: '',
+      deptData: [],
+      policeCategoryData: [],
+      activeFlagData: [{ id: 1, label: '在用' }, { id: 0, label: '停用' }],
+      // others
+      loading: false
+    }
+  },
+  created() {
+    this.getDeptData()
+  },
+  methods: {
+    // 取值
+    getSelectValue(value) {
+      this.formData.deptName = value
+    },
+    // Upload
+    uploadSuccess(data) {
+      this.$set(this.formData, 'icon', data.url)
+      this.fileName = data.fileName + '.' + data.extension
+    },
+    uploadError(error) {
+      this.$message.error({
+        type: 'error',
+        duration: 0,
+        showClose: true,
+        message: error.message
+      })
+    },
+    /**
+     * 加载dialog
+     */
+    open(viewType, data) {
+      if (viewType === 'ADD') {
+        this.title = '新增'
+        this.isView = false
+        this.action = 'add'
+        if (this.viewType !== 'ADD') {
+          data = {}
+        }
+      } else if (viewType === 'EDIT') {
+        this.title = '修改'
+        this.isView = false
+        this.action = 'update'
+      } else {
+        this.title = '详情'
+        this.isView = true
+      }
+      this.viewType = viewType
+      if (isObject(data)) {
+        Object.keys(this.formData).forEach(key => {
+          this.formData[key] = data[key]
+        })
+      }
+      if (this.formData.appType === null || this.formData.appType === undefined) {
+        this.formData.appType = this.typeData[0].id
+      }
+      if (isNull(this.formData.deptName)) {
+        this.defaultTreeId = this.deptData[0].shortName
+      } else {
+        this.defaultTreeId = this.formData.deptName
+      }
+      this.visible = true
+    },
+    close() {
+      this.visible = false
+    },
+    save() {
+      this.$refs[this.formName].validate((valid) => {
+        if (valid) {
+          this.loading = true
+          pushSaveSystem(this.action, this.formData).then(res => {
+            this.$refs[this.formName].resetFields()
+            this.visible = false
+            this.loading = false
+            this.$emit('refreshData')
+            this.$message({
+              type: 'success',
+              message: '保存成功!'
+            })
+          }).catch(error => {
+            console.log(error)
+            this.loading = false
+            this.$message.error({
+              type: 'error',
+              duration: 0,
+              showClose: true,
+              message: '保存失败：' + error.message
+            })
+          })
+        }
+      })
+    },
+    getDeptData() {
+      getDeptTreeData().then(res => {
+        if (!isNull(res.data)) {
+          this.deptData = res.data
+        } else {
+          this.deptData = []
+        }
+      }).catch(error => {
+        console.log(error)
+        this.$message.error({
+          type: 'error',
+          duration: 0,
+          showClose: true,
+          message: '获取机构出错: ' + error.message
+        })
+      })
+    },
+    loadNode(node, resolve) {
+      if (node.level === 0) {
+        getDeptRootData().then(res => {
+          if (!isNull(res.data)) {
+            resolve(res.data)
+            this.defaultTreeId = res.data[0].orgCode
+          } else {
+            resolve([])
+          }
+        }).catch(error => {
+          console.log(error)
+          this.$message.error({
+            type: 'error',
+            duration: 0,
+            showClose: true,
+            message: '获取机构出错: ' + error.message
+          })
+        })
+      } else {
+        getDeptChildren(node.data.orgCode).then(res => {
+          if (!isNull(res.data)) {
+            resolve(res.data)
+          } else {
+            resolve([])
+          }
+        }).catch(error => {
+          console.log(error)
+          this.$message.error({
+            type: 'error',
+            duration: 0,
+            showClose: true,
+            message: '获取机构出错: ' + error.message
+          })
+        })
+      }
+    },
+    formatDictData(dictType, type) {
+      if (dictType === 'system_type') {
+        return formatDictData(this.typeData, type)
+      }
+      if (dictType === 'active_type') {
+        return formatDictData(this.activeFlagData, type)
+      }
+      return ''
+    },
+    isNull(obj) {
+      return isNull(obj)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.main-edit-dialog {
+
+  .dialog-form {
+    ::v-deep {
+      .el-input__inner {
+        width: 250px !important;
+      }
+    }
+  }
+
+  .upload-success {
+    color: #13ce66;
+    margin-right: 5px;
+  }
+}
+</style>

src/views/info/index.vue

@@ -43,33 +43,40 @@
       </el-form>
     </div>
     <div class="list-table">
-      <el-table v-loading="loading" :data="tableData" fit border stripe style="width: 100%;">
+      <div class="list-btn">
+        <el-button plain>notice</el-button>
+        <el-button plain>communication</el-button>
+        <el-button plain>specification</el-button>
+        <el-button plain>approve</el-button>
+      </div>
+      <el-table v-loading="loading" :data="tableData" fit border stripe height="calc(100% - 217px)">
         <el-table-column type="index" label="" width="50" />
-        <el-table-column prop="messageType" label="messageType" :formatter="formatDictData" width="100" show-overflow-tooltip />
+        <el-table-column prop="messageType" label="messageType" :formatter="formatDictData" width="120" show-overflow-tooltip />
         <el-table-column prop="title" label="title" show-overflow-tooltip />
-        <el-table-column prop="createOrgName" label="createOrgName" width="160" show-overflow-tooltip />
-        <el-table-column prop="readStatus" label="readStatus" :formatter="formatDictData" width="60" />
+        <el-table-column prop="createUser" label="createUser" width="180" show-overflow-tooltip />
+        <el-table-column prop="createOrgName" label="createOrgName" width="200" show-overflow-tooltip />
         <el-table-column prop="createTime" label="createTime" width="160" />
-        <el-table-column prop="createUser" label="createUser" width="100" show-overflow-tooltip />
         <el-table-column label="Action" align="center" width="160" class-name="action-column">
           <template slot-scope="scope">
-            <!-- <el-button type="text" @click="viewDetail(scope.row.id)">详情</el-button> -->
-            <el-button type="text" @click="viewDetail(scope.row.content)">View</el-button>
+            <el-button type="text" @click="viewItem(scope.row.targetId)">View</el-button>
+            <el-button type="text" @click="saveItem(scope.row.targetId)">View</el-button>
+            <el-button type="text" @click="deleteItem(scope.row.targetId)">View</el-button>
           </template>
         </el-table-column>
       </el-table>
+      <div v-if="total > 0" class="page">
+        <el-pagination
+          layout="total, sizes, prev, pager, next, jumper"
+          :current-page="current"
+          :total="total"
+          :page-sizes="pageSizeAll"
+          :page-size="size"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
     </div>
-    <div v-if="total > 0" class="page">
-      <el-pagination
-        layout="total, sizes, prev, pager, next, jumper"
-        :current-page="current"
-        :total="total"
-        :page-sizes="pageSizeAll"
-        :page-size="size"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-      />
-    </div>
+    <route-link />
   </div>
 </template>
 
@@ -167,6 +174,15 @@ export default {
         })
       })
     },
+    viewItem(id) {
+      console.log(id)
+    },
+    saveItem(id) {
+      console.log(id)
+    },
+    deleteItem(id) {
+      console.log(id)
+    },
     getTypeData() {
       this.typeData = [{ 'id': 1, 'label': 'notice' }, { 'id': 2, 'label': 'communication' }, { 'id': 3, 'label': 'specification' }]
       // fetchDictData(this.dictType).then(response => {
@@ -222,8 +238,8 @@ export default {
         }
       })
     },
-    formatDictData(type) {
-      return formatDictData(this.typeData, type)
+    formatDictData(row, column, cellValue) {
+      return formatDictData(this.typeData, cellValue)
     }
   }
 }
@@ -232,12 +248,14 @@ export default {
 <style lang="scss" scoped>
 .info-container {
   min-width: 1400px;
-  .list-filter, .list-table {
+  .list-filter, .list-table{
+    padding: 10px 0 0 10px;
     background-color: #fff;
   }
 
   .list-filter {
     margin-bottom: 10px;
+    height: 125px;
 
     .filter-btn {
       width: 450px;
@@ -249,5 +267,19 @@ export default {
       }
     }
   }
+
+  .list-table {
+    height: 100%;
+
+  }
+
+  .list-btn {
+    height: 40px;
+    margin-bottom: 10px;
+  }
+
+  .page {
+    height: 32px;
+  }
 }
 </style>