公告管理

.env

@@ -4,7 +4,7 @@
 VUE_APP_TITLE=D2Admin
 
 # 网络请求公用地址
-VUE_APP_API=/api/
+VUE_APP_API=http://101.36.160.140:21023/api/
 
 # 仓库地址
 VUE_APP_REPO=https://github.com/d2-projects/d2-admin-start-kit

.env.development

@@ -3,3 +3,6 @@
 # 页面 title 前缀
 VUE_APP_TITLE=数量监测智能眼系统
 
+
+# 网络请求公用地址
+VUE_APP_API=http://101.36.160.140:21023/api/

src/App.vue

@@ -25,7 +25,7 @@ export default {
 
 <style lang="scss">
 @import '~@/assets/style/public-class.scss';
-//分页整体样式
+/* //分页整体样式
 .el-pagination{
   margin-top: 20px;
   display:flex;
@@ -47,6 +47,6 @@ justify-content: flex-end;
 //树形节点鼠标移上去的颜色
 .el-tree-node__content:hover {
      background-color:#91a8bc !important;
-}
+} */
 
 </style>

src/api/modules/system/announcementManagement/index.api.js

@@ -0,0 +1,15 @@
+export default ({ service, request, serviceForMock, requestForMock, mock, faker, tools }) => ({
+  /**
+   * @description 登录
+   * @param {Object} data 登录携带的信息
+   */
+   getOrgAnnouncementPage(data) {
+    return request({
+      url: '/orgAnnouncement/authority/getOrgAnnouncementPage',
+      method: 'post',
+      data
+    })
+  },
+
+})
+

src/utils/index.js

@@ -0,0 +1,426 @@
+
+
+/**
+ * Parse the time to string
+ * @param {(Object|string|number)} time
+ * @param {string} cFormat
+ * @returns {string | null}
+ */
+ export function parseTime(time, cFormat) {
+  if (arguments.length === 0 || !time) {
+    return null
+  }
+  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
+  let date
+  if (typeof time === 'object') {
+    date = time
+  } else {
+    if ((typeof time === 'string')) {
+      if ((/^[0-9]+$/.test(time))) {
+        // support "1548221490638"
+        time = parseInt(time)
+      } else {
+        // support safari
+        // https://stackoverflow.com/questions/4310953/invalid-date-in-safari
+        time = time.replace(new RegExp(/-/gm), '/')
+      }
+    }
+
+    if ((typeof time === 'number') && (time.toString().length === 10)) {
+      time = time * 1000
+    }
+    date = new Date(time)
+  }
+  const formatObj = {
+    y: date.getFullYear(),
+    m: date.getMonth() + 1,
+    d: date.getDate(),
+    h: date.getHours(),
+    i: date.getMinutes(),
+    s: date.getSeconds(),
+    a: date.getDay()
+  }
+  const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
+    const value = formatObj[key]
+    // Note: getDay() returns 0 on Sunday
+    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
+    return value.toString().padStart(2, '0')
+  })
+  return time_str
+}
+
+/**
+ * @param {number} time
+ * @param {string} option
+ * @returns {string}
+ */
+export function formatTime(time, option) {
+  if (('' + time).length === 10) {
+    time = parseInt(time) * 1000
+  } else {
+    time = +time
+  }
+  const d = new Date(time)
+  const now = Date.now()
+
+  const diff = (now - d) / 1000
+
+  if (diff < 30) {
+    return '刚刚'
+  } else if (diff < 3600) {
+    // less 1 hour
+    return Math.ceil(diff / 60) + '分钟前'
+  } else if (diff < 3600 * 24) {
+    return Math.ceil(diff / 3600) + '小时前'
+  } else if (diff < 3600 * 24 * 2) {
+    return '1天前'
+  }
+  if (option) {
+    return parseTime(time, option)
+  } else {
+    return (
+      d.getMonth() +
+      1 +
+      '月' +
+      d.getDate() +
+      '日' +
+      d.getHours() +
+      '时' +
+      d.getMinutes() +
+      '分'
+    )
+  }
+}
+
+/**
+ * @param {string} url
+ * @returns {Object}
+ */
+export function getQueryObject(url) {
+  url = url == null ? window.location.href : url
+  const search = url.substring(url.lastIndexOf('?') + 1)
+  const obj = {}
+  const reg = /([^?&=]+)=([^?&=]*)/g
+  search.replace(reg, (rs, $1, $2) => {
+    const name = decodeURIComponent($1)
+    let val = decodeURIComponent($2)
+    val = String(val)
+    obj[name] = val
+    return rs
+  })
+  return obj
+}
+
+/**
+ * @param {string} input value
+ * @returns {number} output value
+ */
+export function byteLength(str) {
+  // returns the byte length of an utf8 string
+  let s = str.length
+  for (var i = str.length - 1; i >= 0; i--) {
+    const code = str.charCodeAt(i)
+    if (code > 0x7f && code <= 0x7ff) s++
+    else if (code > 0x7ff && code <= 0xffff) s += 2
+    if (code >= 0xDC00 && code <= 0xDFFF) i--
+  }
+  return s
+}
+
+/**
+ * @param {Array} actual
+ * @returns {Array}
+ */
+export function cleanArray(actual) {
+  const newArray = []
+  for (let i = 0; i < actual.length; i++) {
+    if (actual[i]) {
+      newArray.push(actual[i])
+    }
+  }
+  return newArray
+}
+
+/**
+ * @param {Object} json
+ * @returns {Array}
+ */
+export function param(json) {
+  if (!json) return ''
+  return cleanArray(
+    Object.keys(json).map(key => {
+      if (json[key] === undefined) return ''
+      return encodeURIComponent(key) + '=' + encodeURIComponent(json[key])
+    })
+  ).join('&')
+}
+
+/**
+ * @param {string} url
+ * @returns {Object}
+ */
+export function param2Obj(url) {
+  const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ')
+  if (!search) {
+    return {}
+  }
+  const obj = {}
+  const searchArr = search.split('&')
+  searchArr.forEach(v => {
+    const index = v.indexOf('=')
+    if (index !== -1) {
+      const name = v.substring(0, index)
+      const val = v.substring(index + 1, v.length)
+      obj[name] = val
+    }
+  })
+  return obj
+}
+
+/**
+ * @param {string} val
+ * @returns {string}
+ */
+export function html2Text(val) {
+  const div = document.createElement('div')
+  div.innerHTML = val
+  return div.textContent || div.innerText
+}
+
+/**
+ * Merges two objects, giving the last one precedence
+ * @param {Object} target
+ * @param {(Object|Array)} source
+ * @returns {Object}
+ */
+export function objectMerge(target, source) {
+  if (typeof target !== 'object') {
+    target = {}
+  }
+  if (Array.isArray(source)) {
+    return source.slice()
+  }
+  Object.keys(source).forEach(property => {
+    const sourceProperty = source[property]
+    if (typeof sourceProperty === 'object') {
+      target[property] = objectMerge(target[property], sourceProperty)
+    } else {
+      target[property] = sourceProperty
+    }
+  })
+  return target
+}
+
+/**
+ * @param {HTMLElement} element
+ * @param {string} className
+ */
+export function toggleClass(element, className) {
+  if (!element || !className) {
+    return
+  }
+  let classString = element.className
+  const nameIndex = classString.indexOf(className)
+  if (nameIndex === -1) {
+    classString += '' + className
+  } else {
+    classString =
+      classString.substr(0, nameIndex) +
+      classString.substr(nameIndex + className.length)
+  }
+  element.className = classString
+}
+
+/**
+ * @param {string} type
+ * @returns {Date}
+ */
+export function getTime(type) {
+  if (type === 'start') {
+    return new Date().getTime() - 3600 * 1000 * 24 * 90
+  } else {
+    return new Date(new Date().toDateString())
+  }
+}
+
+/**
+ * @param {Function} func
+ * @param {number} wait
+ * @param {boolean} immediate
+ * @return {*}
+ */
+export function debounce(func, wait, immediate) {
+  let timeout, args, context, timestamp, result
+
+  const later = function() {
+    // 据上一次触发时间间隔
+    const last = +new Date() - timestamp
+
+    // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
+    if (last < wait && last > 0) {
+      timeout = setTimeout(later, wait - last)
+    } else {
+      timeout = null
+      // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
+      if (!immediate) {
+        result = func.apply(context, args)
+        if (!timeout) context = args = null
+      }
+    }
+  }
+
+  return function(...args) {
+    context = this
+    timestamp = +new Date()
+    const callNow = immediate && !timeout
+    // 如果延时不存在，重新设定延时
+    if (!timeout) timeout = setTimeout(later, wait)
+    if (callNow) {
+      result = func.apply(context, args)
+      context = args = null
+    }
+
+    return result
+  }
+}
+
+/**
+ * This is just a simple version of deep copy
+ * Has a lot of edge cases bug
+ * If you want to use a perfect deep copy, use lodash's _.cloneDeep
+ * @param {Object} source
+ * @returns {Object}
+ */
+export function deepClone(source) {
+  if (!source && typeof source !== 'object') {
+    throw new Error('error arguments', 'deepClone')
+  }
+  const targetObj = source.constructor === Array ? [] : {}
+  Object.keys(source).forEach(keys => {
+    if (source[keys] && typeof source[keys] === 'object') {
+      targetObj[keys] = deepClone(source[keys])
+    } else {
+      targetObj[keys] = source[keys]
+    }
+  })
+  return targetObj
+}
+
+/**
+ * @param {Array} arr
+ * @returns {Array}
+ */
+export function uniqueArr(arr) {
+  return Array.from(new Set(arr))
+}
+
+/**
+ * @returns {string}
+ */
+export function createUniqueString() {
+  const timestamp = +new Date() + ''
+  const randomNum = parseInt((1 + Math.random()) * 65536) + ''
+  return (+(randomNum + timestamp)).toString(32)
+}
+
+/**
+ * Check if an element has a class
+ * @param {HTMLElement} elm
+ * @param {string} cls
+ * @returns {boolean}
+ */
+export function hasClass(ele, cls) {
+  return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'))
+}
+
+/**
+ * Add class to element
+ * @param {HTMLElement} elm
+ * @param {string} cls
+ */
+export function addClass(ele, cls) {
+  if (!hasClass(ele, cls)) ele.className += ' ' + cls
+}
+
+/**
+ * Remove class from element
+ * @param {HTMLElement} elm
+ * @param {string} cls
+ */
+export function removeClass(ele, cls) {
+  if (hasClass(ele, cls)) {
+    const reg = new RegExp('(\\s|^)' + cls + '(\\s|$)')
+    ele.className = ele.className.replace(reg, ' ')
+  }
+}
+
+
+//时间格式化
+export function getNowFormatDate() {
+  var date = new Date()
+  var seperator1 = "-"
+
+  var year = date.getFullYear()
+  var month = date.getMonth() + 1
+  var hour = date.getHours()
+  var minutes = date.getMinutes()
+  // var seconds = date.getSeconds();
+  var strDate = date.getDate()
+
+  if (month >= 1 && month <= 9) {
+    month = "0" + month
+  }
+  if (strDate >= 0 && strDate <= 9) {
+    strDate = "0" + strDate
+  }
+  if (minutes >= 0 && minutes <= 9) {
+    minutes = "0" + minutes
+  }
+  // var currentdate = year + seperator1 + month + seperator1 + strDate+"  "+hour+":" +minutes+":" +seconds;
+
+  var currentdate =year+seperator1+month+seperator1+strDate+" "+hour+":"+minutes
+
+  return currentdate
+}
+//时间格式化
+export function getNowFormatDateone() {
+  var date = new Date()
+  var seperator1 = "-"
+
+  var year = date.getFullYear()
+  var month = date.getMonth() + 1
+  var hour = date.getHours()
+  var minutes = date.getMinutes()
+  var seconds = date.getSeconds();
+  var strDate = date.getDate()
+
+  if (month >= 1 && month <= 9) {
+    month = "0" + month
+  }
+  if (strDate >= 0 && strDate <= 9) {
+    strDate = "0" + strDate
+  }
+  if (minutes >= 0 && minutes <= 9) {
+    minutes = "0" + minutes
+  }
+  if (seconds >= 0 && seconds <= 9) {
+    seconds = "0" + seconds
+  }
+  // var currentdate = year + seperator1 + month + seperator1 + strDate+"  "+hour+":" +minutes+":" +seconds;
+
+  var currentdate =
+    year +
+    seperator1 +
+    month+
+    seperator1 +
+    strDate 
+    +
+    "  " +
+    hour +
+    ":" +
+    minutes
+    // ":"+
+    // seconds
+
+  return currentdate
+}

src/views/demo/system/announcementManagement/index.vue

@@ -1,14 +1,341 @@
 <template>
-    <div>
-         <d2-container>
-    <template slot="header">系统管理/公告管理</template>
- 公告管理
-  </d2-container>
-      
-    </div>
+  <div>
+    <d2-container>
+      <template slot="header">
+        <div class="nav">当前所在位置:系统管理>公告管理</div>
+      </template>
+      <div>
+        <div class="right_main">
+          <div class="right_title">
+            <i class="fa fa-university" aria-hidden="true" style="padding-right: 5px"></i>公告管理
+          </div>
+          <div class="right_table">
+            <el-form :inline="true" :model="formInline" class="demo-form-inline float-left" id="formLabel">
+              <!-- <el-form-item label="仓房名称:">
+                <el-cascader :options="options"></el-cascader>
+              </el-form-item> -->
+              <el-form-item label="发布时间">
+                <el-date-picker v-model="value2" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" value-format="yyyy-MM-dd hh:mm">
+                </el-date-picker>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" icon="el-icon-search" @click="gettime">查询</el-button>
+              </el-form-item>
+
+              <el-form-item>
+                <el-button type="primary" icon="el-icon-refresh-left" @click="reset">重置</el-button>
+              </el-form-item>
+            </el-form>
+            <div class="float-right">
+              <el-button type="primary" icon="fa fa-volume-up" @click="dialogFormVisible = true">发布公告</el-button>
+            </div>
+
+            <el-table :data="cfInfoList" border style="width: 100%" :header-cell-style="{ background: '#0064b9', color: '#c9f5fa' }">
+              <el-table-column type="index" width="50">
+              </el-table-column>
+              <el-table-column prop="title" label="公告标题" align="center">
+              </el-table-column>
+              <el-table-column prop="details" label="公告详情" align="center">
+              </el-table-column>
+              <el-table-column prop="state" label="发布状态" align="center">
+              </el-table-column>
+              <el-table-column prop="publisher" label="发布人" align="center">
+              </el-table-column>
+              <el-table-column prop="time" label="发布时间" align="center">
+              </el-table-column>
+
+              <el-table-column align="center" label="操作" width="180">
+                <template slot-scope="scope">
+                  <el-button @click="handleCheck(scope.row)" type="text" size="small" icon="el-icon-circle-check">查看</el-button>
+                  <el-button type="text" size="small" icon="el-icon-edit">编辑</el-button>
+                  <el-button type="text" size="small" icon="el-icon-delete">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="1" :page-sizes="[10, 20, 30, 40]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
+            </el-pagination>
+            <!-- <pagination
+        
+          :total="total"
+          :page.sync="listQuery.page"
+          :limit.sync="listQuery.limit"
+          @pagination="getList"
+        /> -->
+          </div>
+        </div>
+      </div>
+
+      <el-dialog title="发布公告" :visible.sync="dialogFormVisible">
+        <el-form :model="diaform" :rules="rules" ref="ruleForm">
+          <el-form-item label="公告标题" prop="title" :label-width="formLabelWidth">
+            <el-input v-model="diaform.title" style="width:500px"></el-input>
+          </el-form-item>
+          <el-form-item label="公告详情" prop="details" :label-width="formLabelWidth">
+            <el-input type="textarea" v-model="diaform.details" rows="10" style="width:500px"></el-input>
+          </el-form-item>
+          <el-form-item label="发布人" prop="publisher" :label-width="formLabelWidth">
+            <el-input v-model="diaform.publisher" style="width:500px" :disabled="true"></el-input>
+          </el-form-item>
+          <el-form-item label="发布时间" prop="time" :label-width="formLabelWidth">
+            <el-input v-model="diaform.time" style="width:500px" :disabled="true"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="submitForm('diaform')">立即创建</el-button>
+            <el-button @click="resetForm('ruleForm')">重置</el-button>
+            <el-button @click="dialogFormVisible = false">取 消</el-button>
+            <el-button type="primary" @click="dialogFormVisible = false">保存为草稿</el-button>
+            <el-button type="primary" @click="issue">正式发布</el-button>
+          </el-form-item>
+        </el-form>
+        <!-- <div slot="footer" class="dialog-footer">
+          <el-button @click="dialogFormVisible = false">取 消</el-button>
+          <el-button type="primary" @click="dialogFormVisible = false">保存为草稿</el-button>
+          <el-button type="primary" @click="issue">正式发布</el-button>
+        </div> -->
+      </el-dialog>
+    </d2-container>
+  </div>
 </template>
 <script>
+// 引入分页
+import Pagination from '@/components/pagination'
+import { parseTime } from "@/utils/index"
+import api from '@api'
 export default {
-  name:"announcementManagement"
+
+  name: "announcementManagement",
+  components: { Pagination },
+  data () {
+    return {
+      //options
+      options: [
+        {
+          value: 'zhinan',
+          label: '指南',
+
+          children:
+            [{
+              value: 'shejiyuanze',
+              label: '设计原则',
+              children: [
+                {
+                  value: 'yizhi',
+                  label: '一致'
+                },
+                {
+                  value: 'fankui',
+                  label: '反馈'
+                },
+                {
+                  value: 'xiaolv',
+                  label: '效率'
+                },
+                {
+                  value: 'kekong',
+                  label: '可控'
+                }
+              ],
+            }]
+        }],
+
+      //头部查询条件
+      formInline: {
+        // cfName: "",
+        issueTime: "",
+      },
+      //表格字段
+      cfInfoList: [
+        {
+          title: '关于数量监测系统正式使用通知', //公告标题
+          details: '关于数量监测系统正式使用通知...',//公告详情
+          state: '已发布',
+          publisher: '孟莹',//发布人 
+          time: '2021-10-20 17:43:11'//发布时间
+        },
+        {
+          title: '关于数量监测系统正式使用通知', //公告标题
+          details: '关于数量监测系统正式使用通知...',//公告详情
+          state: '已发布',
+          publisher: '孟莹',//发布人 
+          time: '2021-10-20 17:43:11'//发布时间
+        },
+        {
+          title: '关于数量监测系统正式使用通知', //公告标题
+          details: '关于数量监测系统正式使用通知...',//公告详情
+          state: '已发布',
+          publisher: '孟莹',//发布人 
+          time: '2021-10-20 17:43:11'//发布时间
+        },
+        {
+          title: '关于数量监测系统正式使用通知', //公告标题
+          details: '关于数量监测系统正式使用通知...',//公告详情
+          state: '已发布',
+          publisher: '孟莹',//发布人 
+          time: '2021-10-20 17:43:11'//发布时间
+        },
+        {
+          title: '关于数量监测系统正式使用通知', //公告标题
+          details: '关于数量监测系统正式使用通知...',//公告详情
+          state: '已发布',
+          publisher: '孟莹',//发布人 
+          time: '2021-10-20 17:43:11'//发布时间
+        },
+        {
+          title: '关于数量监测系统正式使用通知', //公告标题
+          details: '关于数量监测系统正式使用通知...',//公告详情
+          state: '已发布',
+          publisher: '孟莹',//发布人 
+          time: '2021-10-20 17:43:11'//发布时间
+        }
+
+      ],
+      // 日期插件
+
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick (picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '最近一个月',
+          onClick (picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '最近三个月',
+          onClick (picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+            picker.$emit('pick', [start, end]);
+          }
+        }]
+      },
+      value2: '', //日期
+      //弹窗
+      dialogTableVisible: false,
+      dialogFormVisible: false,
+      formLabelWidth: '120px',
+
+      //分页
+      total: 30,
+      listQuery: {
+        page: 1,
+        limit: 10,
+        importance: undefined,
+        title: undefined,
+        type: undefined,
+        sort: '+id'
+      },
+      //弹窗表单
+      diaform: {
+        title: '', //公告标题
+        details: '',//公告详情
+        publisher: '',//发布人
+        time: ''//发布时间
+      },
+      rules: {
+        title: [
+          { required: true, message: '请输入公告标题', trigger: 'blur' },
+          { min: 3, message: '长度在 3 字符以上', trigger: 'blur' }
+        ],
+        details: [
+          { required: true, message: '请填写公告详情', trigger: 'blur' }
+        ],
+      },
+      pagination: {
+        // 每页显示的条数
+        pageSize: 10,
+        // 当前页
+        curPage: 1,
+        // 总数
+        total: 20
+      },
+
+    };
+  },
+  created: function () {
+    this.diaform.publisher = '孟莹'
+    this.diaform.time = parseTime(new Date())
+    // this.dateFormat(new Date('yyyy-MM-dd hh:mm'))
+    this.getpageinfo()
+  },
+  mounted () { },
+  methods: {
+    search () { },
+    reset () { },
+    getList () { },
+    //查看
+    handleCheck () {
+      this.$router.push(
+        {
+          path: "/warehouseInfo-check"
+        }
+      )
+    },
+    gettime () {
+      console.log(this.value2, 'value2')
+      console.log(this.value2[0], '开始时间')
+      console.log(this.value2[1], '结束时间')
+    },
+    //重置时间
+    reset () {
+      this.value2 = ''
+    },
+    // 保存为草稿
+    // 正式发布
+    issue () {
+      console.log(this.diaform, 'diaform')
+      this.dialogFormVisible = false
+    },
+    submitForm (formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert('submit!');
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+
+    getpageinfo (data) {
+      data = {
+        "pageIndex": 1,
+        "pageSize": 10,
+        "createTimeStart": "2021-10-01",
+        "createTimeEnd": "2021-12-01"
+      }
+
+      api.getOrgAnnouncementPage(data).then(res => {
+        console.log(res, 'res')
+      }).catch(err => {
+        console.log(err, 'err')
+      })
+    }
+
+  },
+
+};
+</script>
+<style lang="scss" scoped>
+.nav {
+  color: #fff;
+  font-size: 14px;
+
+  background: #004a93;
 }
-</script>
+.float-left {
+  float: left;
+}
+.float-right {
+  float: right;
+}
+</style>

src/views/demo/system/organization/index.vue

@@ -33,8 +33,8 @@
                 </div>
                 <div class="float-right">
                   <el-form-item>
-                   
-                    <el-button type="primary" icon="el-icon-plus" @click="dialogFormVisible = true" >新建机构</el-button>
+
+                    <el-button type="primary" icon="el-icon-plus" @click="dialogFormVisible = true">新建机构</el-button>
                   </el-form-item>
                   <el-form-item>
                     <el-button @click="toggleRowExpansion(true)">全部展开</el-button>
@@ -44,15 +44,15 @@
                   </el-form-item>
                 </div>
               </el-form>
-              <el-table :data="tableData" ref='dataTreeList' style="width: 100%" :header-cell-style="{ background: '#0064b9', color: '#c9f5fa' }" row-key="id" border :tree-props="{children: 'children',hasChildren: 'hasChildren',}">
-                <el-table-column prop="OrganizationName" label="组织机构名称" align="center">
+              <el-table :data="tableData1" ref='dataTreeList' style="width: 100%" :header-cell-style="{ background: '#0064b9', color: '#c9f5fa' }" row-key="id" border :tree-props="{children: 'children',hasChildren: 'hasChildren',}">
+                <el-table-column prop="orgName" label="组织机构名称" align="center">
                 </el-table-column>
-                <el-table-column prop="storeType" label="仓库类型" align="center">
+                <el-table-column prop="storeTypeName" label="仓库类型" align="center">
                 </el-table-column>
 
-                <el-table-column prop="state" label="机构状态" align="center">
+                <el-table-column prop="orgState" label="机构状态" align="center">
                 </el-table-column>
-                <el-table-column prop="CreateDate" label="创建时间" align="center">
+                <el-table-column prop="buildTime" label="创建时间" align="center">
                 </el-table-column>
                 <el-table-column fixed="right" label="操作" width="200">
                   <template slot-scope="scope">
@@ -68,23 +68,38 @@
           </div>
         </div>
       </div>
-      <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
-  <el-form :model="form">
-    <el-form-item label="活动名称" :label-width="formLabelWidth">
-      <el-input v-model="form.name" autocomplete="off" style="width:223px"></el-input>
-    </el-form-item>
-    <el-form-item label="活动区域" :label-width="formLabelWidth">
-      <el-select v-model="form.region" placeholder="请选择活动区域">
-        <el-option label="区域一" value="shanghai"></el-option>
-        <el-option label="区域二" value="beijing"></el-option>
-      </el-select>
-    </el-form-item>
-  </el-form>
-  <div slot="footer" class="dialog-footer">
-    <el-button @click="dialogFormVisible = false">取 消</el-button>
-    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
-  </div>
-</el-dialog>
+      <el-dialog title="新建机构" :visible.sync="dialogFormVisible">
+        <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
+          <el-form-item label="机构名称" prop="name" :label-width="formLabelWidth">
+            <el-input v-model="ruleForm.name" style="width:500px"></el-input>
+          </el-form-item>
+          <el-form-item label="上级机构" prop="superior" :label-width="formLabelWidth">
+            <!-- <el-input type="textarea" v-model="ruleForm.superior" rows="10" style="width:500px"></el-input> -->
+            <el-select v-model="superior" multiple filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethod" :loading="loading">
+              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" style="width:500px">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="机构状态" prop="status" :label-width="formLabelWidth">
+            <!-- <el-radio v-model="ruleForm.status" label="1" border>备选项1</el-radio>
+            <el-radio v-model="ruleForm.status" label="2" border>备选项2</el-radio> -->
+            <el-radio-group v-model="ruleForm.status" size="small">
+              <el-radio label="1" border>备选项1</el-radio>
+              <el-radio label="2" border >备选项2</el-radio>
+            </el-radio-group>
+            <!-- <el-input v-model="ruleForm.status" style="width:500px" :disabled="true"></el-input> -->
+          </el-form-item>
+
+          <el-form-item>
+            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
+            <el-button @click="resetForm('ruleForm')">重置</el-button>
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="dialogFormVisible = false">取 消</el-button>
+          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
+        </div>
+      </el-dialog>
     </d2-container>
   </div>
 </template>
@@ -112,7 +127,7 @@ export default {
           cfState: ''
         }
       ],
-      tableData: [{
+      /* tableData: [{
         id: 1,
         CreateDate: '2016-05-02',
         OrganizationName: '王小虎',
@@ -149,13 +164,91 @@ export default {
         OrganizationName: '王小虎',
         storeType: '直属库',
         state: '启用',
-      }],
+      }], */
+      tableData:[
+        {
+            "id": 1,
+            "orgName": "中储粮河南分公司",
+            "storeTypeName": "直属库",
+            "storeTypeCode": 1,
+            "orgState": "1",
+            "parentId": 0,
+            "buildTime": "2021-10-20 19:37:08",
+            "children": [
+                {
+                    "id": 2,
+                    "orgName": "商丘直属库",
+                    "storeTypeName": "直属库",
+                    "storeTypeCode": 1,
+                    "orgState": "1",
+                    "parentId": 1,
+                    "buildTime": "2021-10-20 19:38:38",
+                    "children": [
+                        {
+                            "id": 3,
+                            "orgName": "宁陵粮油储备公司",
+                            "storeTypeName": "直属库",
+                            "storeTypeCode": 1,
+                            "orgState": "1",
+                            "parentId": 2,
+                            "buildTime": "2021-10-20 19:39:02",
+                            "children": [
+                                {
+                                    "id": 4,
+                                    "orgName": "1号仓",
+                                    "storeTypeName": "直属库",
+                                    "storeTypeCode": 1,
+                                    "orgState": "1",
+                                    "parentId": 3,
+                                    "buildTime": "2021-10-20 19:39:49",
+                                    "children": []
+                                },
+                                {
+                                    "id": 5,
+                                    "orgName": "2号仓",
+                                    "storeTypeName": "直属库",
+                                    "storeTypeCode": 1,
+                                    "orgState": "1",
+                                    "parentId": 3,
+                                    "buildTime": "2021-10-20 19:39:49",
+                                    "children": []
+                                },
+                                {
+                                    "id": 6,
+                                    "orgName": "3号仓",
+                                    "storeTypeName": "直属库",
+                                    "storeTypeCode": 1,
+                                    "orgState": "1",
+                                    "parentId": 3,
+                                    "buildTime": "2021-10-20 19:39:49",
+                                    "children": []
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        }
+    ],
+      tableData1:[],
       dialogTableVisible: false,
       dialogFormVisible: false,
       formLabelWidth: '120px',
-      form:{
-        name:'',
-        region:''
+      form: {
+        name: '',
+        region: ''
+      },
+      ruleForm: {
+        name: '', //公告标题
+        superior: '',//上级机构
+        radio1: '1',
+        status: ''//机构状态
+      },
+      rules: {
+        name: [
+          { required: true, message: '请输入机构名称', trigger: 'blur' },
+        ],
+
       },
       pagination: {
         // 每页显示的条数
@@ -172,8 +265,13 @@ export default {
       this.$refs.tree.filter(val)
     }
   },
+  created () {
+this.tableData1[0]=JSON.parse(JSON.stringify(this.tableData[0])) 
+      console.log(this.tableData1,'tableData1')
+  },
   mounted () {
     this.restaurants = this.loadAll();
+    
   },
   methods: {
     filterNode (value, data) {
@@ -263,11 +361,15 @@ export default {
       console.log(ev);
     },
     // 全部展开
-  toggleRowExpansion(isExpansion){
-    this.tableData.forEach(item=>{
-        this.$refs.dataTreeList.toggleRowExpansion(item,isExpansion);
-    })
-  },
+    toggleRowExpansion (isExpansion) {
+      this.tableData.forEach(item => {
+        this.$refs.dataTreeList.toggleRowExpansion(item, isExpansion);
+      })
+    },
+    reset (){
+      this.tableData1[0]=JSON.parse(JSON.stringify(this.tableData[0])) 
+      console.log(this.tableData1,'tableData1')
+    }
 
   }
 }
@@ -339,5 +441,7 @@ export default {
 .float-right {
   float: right;
 }
-
+.el-form-item__label {
+  color: #fff;
+}
 </style>

src/views/system/login/page.vue

@@ -5,48 +5,31 @@
         <li v-for="n in 10" :key="n"></li>
       </ul>
     </div>
-    <div
-      class="page-login--layer page-login--layer-time"
-      flex="main:center cross:center">
+    <div class="page-login--layer page-login--layer-time" flex="main:center cross:center">
       {{time}}
     </div>
     <div class="page-login--layer">
-      <div
-        class="page-login--content"
-        flex="dir:top main:justify cross:stretch box:justify">
+      <div class="page-login--content" flex="dir:top main:justify cross:stretch box:justify">
         <div class="page-login--content-header">
-          <p class="page-login--content-header-motto" >
-            时间是一切财富中最宝贵的财富
+          <p class="page-login--content-header-motto">
+            <!-- 时间是一切财富中最宝贵的财富 -->
             {{ tips }}
           </p>
         </div>
-        <div
-          class="page-login--content-main"
-          flex="dir:top main:center cross:center">
+        <div class="page-login--content-main" flex="dir:top main:center cross:center">
           <!-- logo -->
           <img class="page-login--logo" src="./image/logo.png">
           <!-- form -->
           <div class="page-login--form">
             <el-card shadow="never">
-              <el-form
-                ref="loginForm"
-                label-position="top"
-                :rules="rules"
-                :model="formLogin"
-                size="default">
+              <el-form ref="loginForm" label-position="top" :rules="rules" :model="formLogin" size="default">
                 <el-form-item prop="username">
-                  <el-input
-                    type="text"
-                    v-model="formLogin.username"
-                    placeholder="用户名">
+                  <el-input type="text" v-model="formLogin.username" placeholder="用户名">
                     <i slot="prepend" class="fa fa-user-circle-o"></i>
                   </el-input>
                 </el-form-item>
                 <el-form-item prop="password">
-                  <el-input
-                    type="password"
-                    v-model="formLogin.password"
-                    placeholder="密码">
+                  <el-input type="password" v-model="formLogin.password" placeholder="密码">
                     <i slot="prepend" class="fa fa-keyboard-o"></i>
                   </el-input>
                 </el-form-item>
@@ -60,29 +43,32 @@
                     </template>
                   </el-input>
                 </el-form-item> -->
-                <el-button
-                  size="default"
-                  @click="submit"
-                  type="primary"
-                  class="button-login">
+                <el-button size="default" @click="submit" type="primary" class="button-login">
                   登录
                 </el-button>
+                <p class="page-login--options" flex="main:justify cross:center">
+                  <span>
+                    <d2-icon name="question-circle" /> 忘记密码
+                  </span>
+                  <span>注册用户</span>
+                </p>
               </el-form>
             </el-card>
-            <p
-              class="page-login--options"
-              flex="main:justify cross:center">
-              <span><d2-icon name="question-circle"/> 忘记密码</span>
+            <p class="page-login--options" flex="main:justify cross:center">
+              <span>
+                <d2-icon name="question-circle" /> 忘记密码
+              </span>
               <span>注册用户</span>
             </p>
             <!-- quick login -->
             <el-button class="page-login--quick" size="default" type="info" @click="dialogVisible = true">
-              快速选择用户<!-- （测试功能） -->
+              快速选择用户
+              <!-- （测试功能） -->
             </el-button>
           </div>
         </div>
         <div class="page-login--content-footer">
-         <!--  <p class="page-login--content-footer-locales">
+          <!-- <p class="page-login--content-footer-locales">
             <a
               v-for="language in $languages"
               :key="language.value"
@@ -92,8 +78,8 @@
           </p> -->
           <p class="page-login--content-footer-copyright">
             Copyright
-            <d2-icon name="copyright"/>
-            紫光软件 
+            <d2-icon name="copyright" />
+            紫光软件
             <a href="https://github.com/FairyEver">
               All&nbsp;Rights&nbsp;Reserved
             </a>
@@ -106,14 +92,11 @@
         </div>
       </div>
     </div>
-    <el-dialog
-      title="快速选择用户"
-      :visible.sync="dialogVisible"
-      width="400px">
+    <el-dialog title="快速选择用户" :visible.sync="dialogVisible" width="400px">
       <el-row :gutter="10" style="margin: -20px 0px -10px 0px;">
         <el-col v-for="(user, index) in users" :key="index" :span="8">
           <div class="page-login--quick-user" @click="handleUserBtnClick(user)">
-            <d2-icon name="user-circle-o"/>
+            <d2-icon name="user-circle-o" />
             <span>{{user.name}}</span>
           </div>
         </el-col>
@@ -190,7 +173,7 @@ export default {
         '对生活充满热情，对未来充满信心。',
         '功夫在平时，成功源于积累。',
         '时间是一切财富中最宝贵的财富。',
-        
+
       ]
     }
   },
@@ -198,9 +181,9 @@ export default {
     // eslint-disable-next-line no-unused-expressions
     this.timeInterval = setInterval(() => {
       this.refreshTime()
-    // eslint-disable-next-line no-sequences
+      // eslint-disable-next-line no-sequences
     }, 1000),
-    this.tipsrandom()
+      this.tipsrandom()
   },
   beforeDestroy () {
     clearInterval(this.timeInterval)
@@ -258,11 +241,11 @@ export default {
 <style lang="scss">
 .page-login {
   @extend %unable-select;
-  $backgroundColor: #F0F2F5;
+  $backgroundColor: #f0f2f5;
   // ---
   background-color: $backgroundColor;
-  background: url('./image/bg.png') center no-repeat ;
-  background-size:100% 100%;
+  background: url("./image/bg.png") center no-repeat;
+  background-size: 100% 100%;
   height: 100%;
   position: relative;
   // 层
@@ -304,7 +287,8 @@ export default {
   }
   // 登录表单
   .page-login--form {
-    width: 280px;
+    width: 380px;
+
     // 卡片
     .el-card {
       margin-bottom: 15px;
@@ -327,6 +311,7 @@ export default {
     // 登陆选项
     .page-login--options {
       margin: 0px;
+      margin-top: 18px;
       padding: 0px;
       font-size: 14px;
       color: $color-primary;
@@ -335,6 +320,7 @@ export default {
     }
     .page-login--quick {
       width: 100%;
+
     }
   }
   // 快速选择用户面板
@@ -374,7 +360,7 @@ export default {
       color: $color-text-normal;
       a {
         color: $color-text-normal;
-        margin: 0 .5em;
+        margin: 0 0.5em;
         &:hover {
           color: $color-text-main;
         }
@@ -420,16 +406,16 @@ export default {
       list-style: none;
       width: 20px;
       height: 20px;
-      background: #FFF;
+      background: #fff;
       animation: animate 25s linear infinite;
       bottom: -200px;
       @keyframes animate {
-        0%{
+        0% {
           transform: translateY(0) rotate(0deg);
           opacity: 1;
           border-radius: 0;
         }
-        100%{
+        100% {
           transform: translateY(-1000px) rotate(720deg);
           opacity: 0;
           border-radius: 50%;