sync

src/router/modules/home.js

@@ -12,7 +12,8 @@ export default {
     name: 'Home',
     meta: {
       title: '工作台',
-      icon: 'shouye'
+      icon: 'shouye',
+      affix: true
     }
   }]
 }

src/router/modules/info.js

@@ -13,5 +13,20 @@ export default {
       title: '信息管理',
       icon: 'xinxiguanli'
     }
+    // noShowingChildren: true,
+    // children: [{
+    //   path: 'notice',
+    //   name: 'InfoNotice',
+    //   hidden: true,
+    //   component: () => import('@/views/info/components/DetailEdit')
+    // }, {
+    //   path: 'comm',
+    //   hidden: true,
+    //   component: () => import('@/views/info/components/DetailEdit')
+    // }, {
+    //   path: 'spec',
+    //   hidden: true,
+    //   component: () => import('@/views/info/components/DetailEdit')
+    // }]
   }]
 }

src/styles/index.scss

@@ -17,6 +17,7 @@ body {
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   font-family: Microsoft YaHei, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Arial, sans-serif;
+  background-color: #f5f8fe;
 }
 
 label {

src/styles/sidebar.scss

@@ -6,7 +6,6 @@
     margin-left: $sideBarWidth;
     padding-top: $headerHeight;
     position: relative;
-    background-color: #f5f8fe;
     padding-left: 5px;
   }
 

src/views/home/components/MessageList.vue

@@ -75,7 +75,7 @@
   </div>
 </template>
 <script>
-import { hasValidRecords, isNull, formatDictData } from '@/utils/convert'
+import { hasValidRecords, formatDictData } from '@/utils/convert'
 import { fetchTableList, pushMarkRead } from '@/api/message'
 import { fetchAllSystemList } from '@/api/system'
 

src/views/info/components/NoticeAdd.vue

@@ -0,0 +1,249 @@
+<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="rules" label-width="120px" class="dialog-form">
+        <el-form-item prop="title" label="Title">
+          <el-input v-model="formData.systemName" placeholder="Please Input" clearable />
+        </el-form-item>
+        <el-form-item prop="scopeIds" label="Range">
+          <el-input v-model="formData.scopeIds" clearable />
+        </el-form-item>
+        <el-form-item prop="attachmentPath" label="File">
+          <upload-file :file-type="formData.messageType" :on-success="uploadSuccess" :on-error="uploadError" />
+          <span style="display:none">{{ formData.attachmentPath }} </span>
+          <div v-if="!isNull(formData.attachmentName)">
+            <i class="upload-success el-icon-circle-check" />{{ formData.attachmentName }}
+          </div>
+        </el-form-item>
+        <el-form-item prop="content" label="Content">
+          <el-input v-model="formData.content" type="textarea" :rows="3" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">Cancel</el-button>
+        <el-button type="primary" @click="save">Confirm</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { isNull, formatDictData } from '@/utils/convert'
+
+import { pushSaveSystem } from '@/api/system'
+import { getDeptRootData, getDeptChildren, getDeptTreeData } from '@/api/dept'
+
+import UploadFile from '@/components/Upload/UploadFile'
+
+export default {
+  components: { UploadFile },
+  props: {
+    typeData: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      // dialog
+      visible: false,
+      isView: true,
+      viewType: 'ADD',
+      title: 'Edit',
+      formName: 'editForm',
+      formData: {
+        id: null,
+        messageType: 1,
+        title: '',
+        scopeIds: [],
+        attachmentPath: '',
+        attachmentName: '',
+        content: ''
+      },
+      rules: {
+        title: [
+          { required: true, message: '请输入标题', trigger: 'change' }
+        ],
+        scopeIds: [
+          { required: true, message: '请选择发布范围', trigger: 'blur' }
+        ],
+        content: [
+          { required: true, message: '请输入信息内容', trigger: 'blur' }
+        ]
+      },
+      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() {
+    console.log('created')
+  },
+  mounted() {
+    console.log('mounted')
+  },
+  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) {
+      this.title = 'Publish Notice'
+      this.isView = false
+      this.action = 'add'
+      this.viewType = viewType
+      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/components/DetailEdit.vue → src/views/info/components/NoticeEdit.vue

@@ -188,7 +188,10 @@ export default {
     }
   },
   created() {
-    this.getDeptData()
+    console.log('created')
+  },
+  mounted() {
+    console.log('mounted')
   },
   methods: {
     // 取值

src/views/info/components/NoticeView.vue

@@ -0,0 +1,363 @@
+<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() {
+    console.log('created')
+  },
+  mounted() {
+    console.log('mounted')
+  },
+  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

@@ -44,12 +44,12 @@
     </div>
     <div class="list-table">
       <div class="list-btn">
-        <el-button plain>notice</el-button>
+        <el-button plain @click="addNotice">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 v-loading="loading" :data="tableData" fit border stripe height="calc(100% - 82px)">
         <el-table-column type="index" label="" width="50" />
         <el-table-column prop="messageType" label="messageType" :formatter="formatDictData" width="120" show-overflow-tooltip />
         <el-table-column prop="title" label="title" show-overflow-tooltip />
@@ -76,7 +76,9 @@
         />
       </div>
     </div>
-    <route-link />
+    <notice-add ref="noticeAdd" />
+    <notice-edit ref="noticeEdit" />
+    <notice-view ref="noticeView" />
   </div>
 </template>
 
@@ -85,8 +87,17 @@ import { fetchTableList } from '@/api/info'
 
 import { hasValidRecords, formatDictData } from '@/utils/convert'
 
+import NoticeAdd from './components/NoticeAdd'
+import NoticeEdit from './components/NoticeEdit'
+import NoticeView from './components/NoticeView'
+
 export default {
   name: 'Info',
+  components: {
+    NoticeAdd,
+    NoticeEdit,
+    NoticeView
+  },
   data() {
     return {
       // type
@@ -174,8 +185,12 @@ export default {
         })
       })
     },
-    viewItem(id) {
+    addNotice() {
+      this.$refs['noticeAdd'].open('ADD')
+    },
+    viewItem(viewType, id) {
       console.log(id)
+      this.$refs['noticeEdit'].open(viewType, id)
     },
     saveItem(id) {
       console.log(id)
@@ -269,7 +284,7 @@ export default {
   }
 
   .list-table {
-    height: 100%;
+    height: calc(100% - 135px);
 
   }