提交

src/components/ELScrollbar/index.js

@@ -0,0 +1,8 @@
+import Scrollbar from './src/main';
+
+/* istanbul ignore next */
+Scrollbar.install = function(Vue) {
+  Vue.component(Scrollbar.name, Scrollbar);
+};
+
+export default Scrollbar;

src/components/ELScrollbar/src/bar.js

@@ -0,0 +1,92 @@
+import { on, off } from 'element-ui/src/utils/dom'
+import { renderThumbStyle, BAR_MAP } from './util'
+
+/* istanbul ignore next */
+export default {
+  name: 'Bar',
+
+  props: {
+    vertical: Boolean,
+    size: String,
+    move: Number
+  },
+
+  computed: {
+    bar() {
+      return BAR_MAP[this.vertical ? 'vertical' : 'horizontal']
+    },
+
+    wrap() {
+      return this.$parent.wrap
+    }
+  },
+
+  render(h) {
+    const { size, move, bar } = this
+
+    return (
+      <div
+        class={ ['el-scrollbar__bar', 'is-' + bar.key] }
+        onMousedown={ this.clickTrackHandler } >
+        <div
+          ref='thumb'
+          class='el-scrollbar__thumb'
+          onMousedown={ this.clickThumbHandler }
+          style={ renderThumbStyle({ size, move, bar }) }>
+        </div>
+      </div>
+    )
+  },
+
+  methods: {
+    clickThumbHandler(e) {
+      // prevent click event of right button
+      if (e.ctrlKey || e.button === 2) {
+        return
+      }
+      this.startDrag(e)
+      this[this.bar.axis] = (e.currentTarget[this.bar.offset] - (e[this.bar.client] - e.currentTarget.getBoundingClientRect()[this.bar.direction]))
+    },
+
+    clickTrackHandler(e) {
+      const offset = Math.abs(e.target.getBoundingClientRect()[this.bar.direction] - e[this.bar.client])
+      const thumbHalf = (this.$refs.thumb[this.bar.offset] / 2)
+      const thumbPositionPercentage = ((offset - thumbHalf) * 100 / this.$el[this.bar.offset])
+
+      this.wrap[this.bar.scroll] = (thumbPositionPercentage * this.wrap[this.bar.scrollSize] / 100)
+    },
+
+    startDrag(e) {
+      e.stopImmediatePropagation()
+      this.cursorDown = true
+
+      on(document, 'mousemove', this.mouseMoveDocumentHandler)
+      on(document, 'mouseup', this.mouseUpDocumentHandler)
+      document.onselectstart = () => false
+    },
+
+    mouseMoveDocumentHandler(e) {
+      if (this.cursorDown === false) return
+      const prevPage = this[this.bar.axis]
+
+      if (!prevPage) return
+
+      const offset = ((this.$el.getBoundingClientRect()[this.bar.direction] - e[this.bar.client]) * -1)
+      const thumbClickPosition = (this.$refs.thumb[this.bar.offset] - prevPage)
+      const thumbPositionPercentage = ((offset - thumbClickPosition) * 100 / this.$el[this.bar.offset])
+
+      this.wrap[this.bar.scroll] = (thumbPositionPercentage * this.wrap[this.bar.scrollSize] / 100)
+    },
+
+    mouseUpDocumentHandler(e) {
+      this.cursorDown = false
+      this[this.bar.axis] = 0
+      off(document, 'mousemove', this.mouseMoveDocumentHandler)
+      document.onselectstart = null
+    }
+  },
+
+  destroyed() {
+    off(document, 'mouseup', this.mouseUpDocumentHandler)
+  }
+}

src/components/ELScrollbar/src/main.js

@@ -0,0 +1,130 @@
+// reference https://github.com/noeldelgado/gemini-scrollbar/blob/master/index.js
+
+import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event'
+import scrollbarWidth from 'element-ui/src/utils/scrollbar-width'
+import { toObject } from 'element-ui/src/utils/util'
+import Bar from './bar'
+
+/* istanbul ignore next */
+export default {
+  name: 'ElScrollbar',
+
+  components: { Bar },
+
+  props: {
+    native: Boolean,
+    wrapStyle: {},
+    wrapClass: {},
+    viewClass: {},
+    viewStyle: {},
+    noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能
+    tag: {
+      type: String,
+      default: 'div'
+    }
+  },
+
+  data() {
+    return {
+      sizeWidth: '0',
+      sizeHeight: '0',
+      moveX: 0,
+      moveY: 0
+    }
+  },
+
+  computed: {
+    wrap() {
+      return this.$refs.wrap
+    }
+  },
+
+  render(h) {
+    const gutter = scrollbarWidth()
+    let style = this.wrapStyle
+
+    if (gutter) {
+      const gutterWith = `-${gutter}px`
+      const gutterStyle = `margin-bottom: ${gutterWith}; margin-right: ${gutterWith};`
+
+      if (Array.isArray(this.wrapStyle)) {
+        style = toObject(this.wrapStyle)
+        style.marginRight = style.marginBottom = gutterWith
+      } else if (typeof this.wrapStyle === 'string') {
+        style += gutterStyle
+      } else {
+        style = gutterStyle
+      }
+    }
+    const view = h(this.tag, {
+      class: ['el-scrollbar__view', this.viewClass],
+      style: this.viewStyle,
+      ref: 'resize'
+    }, this.$slots.default)
+    const wrap = (
+      <div
+        ref='wrap'
+        style={ style }
+        onScroll={ this.handleScroll }
+        class={ [this.wrapClass, 'el-scrollbar__wrap', gutter ? '' : 'el-scrollbar__wrap--hidden-default'] }>
+        { [view] }
+      </div>
+    )
+    let nodes
+
+    if (!this.native) {
+      nodes = ([
+        wrap,
+        <Bar
+          move={ this.moveX }
+          size={ this.sizeWidth }></Bar>,
+        <Bar
+          vertical
+          move={ this.moveY }
+          size={ this.sizeHeight }></Bar>
+      ])
+    } else {
+      nodes = ([
+        <div
+          ref='wrap'
+          class={ [this.wrapClass, 'el-scrollbar__wrap'] }
+          style={ style }>
+          { [view] }
+        </div>
+      ])
+    }
+    return h('div', { class: 'el-scrollbar' }, nodes)
+  },
+
+  methods: {
+    handleScroll() {
+      const wrap = this.wrap
+
+      this.moveY = ((wrap.scrollTop * 100) / wrap.clientHeight)
+      this.moveX = ((wrap.scrollLeft * 100) / wrap.clientWidth)
+    },
+
+    update() {
+      let heightPercentage, widthPercentage
+      const wrap = this.wrap
+      if (!wrap) return
+
+      heightPercentage = (wrap.clientHeight * 100 / wrap.scrollHeight)
+      widthPercentage = (wrap.clientWidth * 100 / wrap.scrollWidth)
+
+      this.sizeHeight = (heightPercentage < 100) ? (heightPercentage + '%') : ''
+      this.sizeWidth = (widthPercentage < 100) ? (widthPercentage + '%') : ''
+    }
+  },
+
+  mounted() {
+    if (this.native) return
+    this.$nextTick(this.update)
+    !this.noresize && addResizeListener(this.$refs.resize, this.update)
+  },
+
+  beforeDestroy() {
+    if (this.native) return
+    !this.noresize && removeResizeListener(this.$refs.resize, this.update)
+  }
+}

src/components/ELScrollbar/src/util.js

@@ -0,0 +1,34 @@
+export const BAR_MAP = {
+  vertical: {
+    offset: 'offsetHeight',
+    scroll: 'scrollTop',
+    scrollSize: 'scrollHeight',
+    size: 'height',
+    key: 'vertical',
+    axis: 'Y',
+    client: 'clientY',
+    direction: 'top'
+  },
+  horizontal: {
+    offset: 'offsetWidth',
+    scroll: 'scrollLeft',
+    scrollSize: 'scrollWidth',
+    size: 'width',
+    key: 'horizontal',
+    axis: 'X',
+    client: 'clientX',
+    direction: 'left'
+  }
+};
+
+export function renderThumbStyle({ move, size, bar }) {
+  const style = {};
+  const translate = `translate${bar.axis}(${ move }%)`;
+
+  style[bar.size] = size;
+  style.transform = translate;
+  style.msTransform = translate;
+  style.webkitTransform = translate;
+
+  return style;
+};

src/layout/index.vue

@@ -8,9 +8,9 @@
         <tags-view v-if="needTagsView" />
       </div>
       <app-main />
-      <right-panel v-if="showSettings">
-        <settings />
-      </right-panel>
+<!--      <right-panel v-if="showSettings">-->
+<!--        <settings />-->
+<!--      </right-panel>-->
     </div>
   </div>
 </template>

src/main.js

@@ -23,7 +23,9 @@ import {
   DropdownMenu,
   Select,
   Option,
-  Switch
+  Switch,
+  Submenu,
+  ColorPicker
 } from 'element-ui'
 
 import './styles/element-variables.scss'
@@ -42,6 +44,8 @@ import './utils/error-log' // error log
 import JDictSelectTag from './components/dict/index.js'
 import JMultiSelectTag from './components/dict/index.js'
 import * as filters from './filters'
+import ELScrollbar from '@/components/ELScrollbar'
+
 Vue.use(Antd)
 Vue.use(JDictSelectTag)
 Vue.use(JMultiSelectTag)
@@ -58,6 +62,8 @@ if (process.env.NODE_ENV === 'production') {
   mockXHR()
 }
 
+Vue.use(ELScrollbar)
+Vue.use(ColorPicker)
 Vue.use(Switch)
 Vue.use(Option)
 Vue.use(Select)
@@ -71,12 +77,11 @@ Vue.use(Tooltip)
 Vue.use(Button)
 Vue.use(Col)
 Vue.use(Row)
-
-
+Vue.use(Submenu)
 Vue.use(Card)
-Vue.use(MenuItemGroup)
-Vue.use(MenuItem)
 Vue.use(Menu)
+Vue.use(MenuItem)
+Vue.use(MenuItemGroup)
 Vue.use(Breadcrumb)
 Vue.use(BreadcrumbItem)
 

src/router/index.js

@@ -115,6 +115,12 @@ export const constantRoutes = [
         component: () => import('@/views/basics/pillar/index'), // Parent router-view
         name: 'pillar',
         meta: { title: '支柱数据' }
+      },
+      {
+        path: 'add',
+        component: () => import('@/views/basics/add/index'), // Parent router-view
+        name: 'add',
+        meta: { title: '附加悬挂锚段' }
       }
     ]
   },

src/views/basics/add/CheckAndEditModel.vue

@@ -0,0 +1,111 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="800"
+    :visible="visible"
+    :mask-closable="false"
+    cancel-text="关闭"
+    @close="close"
+  >
+    <a-form-model ref="form" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="validatorRules" :model="model">
+      <a-form-model-item label="文书名称" prop="name">
+        <a-input v-model="model.name" />
+      </a-form-model-item>
+<!--      <a-form-model-item label="文书类型" prop="type">-->
+<!--        <j-dict-select-tag-->
+<!--          v-model="model.type"-->
+<!--          style="width: 360px"-->
+<!--          dict-code="word_type"-->
+<!--        />-->
+<!--      </a-form-model-item>-->
+      <a-form-model-item label="文书描述" prop="remarks">
+        <a-input v-model="model.remarks" />
+      </a-form-model-item>
+    </a-form-model>
+  </j-modal>
+</template>
+<script>
+import { httpAction } from '@/api/request'
+import JModal from '@/components/JModal'
+export default {
+  name: 'CheckAndEditModel',
+  components: {
+    JModal
+  },
+  data() {
+    return {
+      labelCol: { span: 4 },
+      wrapperCol: { span: 14 },
+      dataSource: [],
+      title: '',
+      visible: false,
+      isCheck: false,
+      model: {},
+      validatorRules: {
+        name: [{ required: true, message: '请输入' }],
+        type: [{ required: true, message: '请选择' }]
+      },
+      url: {
+        add: '/business/catenary/bus/zzdzxx/add',
+        edit: '/business/catenary/bus/zzdzxx/update'
+      }
+    }
+  },
+  created() {
+  },
+  methods: {
+    add() {
+      this.model = {}
+      this.visible = true
+    },
+    edit(record) {
+      debugger
+      this.model = Object.assign({}, record)
+      this.visible = true
+    },
+    close(isSubmit) {
+      if (isSubmit) {
+        this.checkData()
+      } else {
+        this.visible = false
+      }
+    },
+    checkData() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.saveData()
+        } else {
+          return false
+        }
+      })
+    },
+    saveData(result) {
+      let url, type
+      if (!this.model.id) {
+        url = this.url.add
+        type = 'post'
+      } else {
+        debugger
+        url = this.url.edit
+        type = 'put'
+      }
+      if (result) {
+        this.model.fileName = result.fileName
+        this.model.tempUrl = result.tempUrl
+      } else {
+        this.model.fileName = ''
+        this.model.tempUrl = ''
+      }
+      httpAction(url, this.model, type).then((res) => {
+        if (res.code === 200) {
+          this.$message.success(res.msg)
+          this.$emit('ok')
+          this.visible = false
+        } else {
+          console.log(res)
+        }
+      })
+    }
+  }
+}
+</script>

src/views/basics/add/index.vue

@@ -0,0 +1,148 @@
+<template>
+  <el-card style="margin: 15px">
+
+    <!-- 查询区域 -->
+    <div class="table-page-search-wrapper">
+      <!-- 搜索区域 -->
+      <a-form layout="inline" @keyup.enter.native="searchQuery">
+        <a-form-item>
+          <j-dict-select-tag
+            v-model="queryParam.xb"
+            style="width: 150px"
+            placeholder="选择线别"
+            dict-code="sj_plan_status"
+          />
+        </a-form-item>
+        <a-form-item>
+          <j-dict-select-tag
+            v-model="queryParam.sb"
+            style="width: 150px"
+            placeholder="选择所别"
+            dict-code="sj_plan_status"
+          />
+        </a-form-item>
+        <a-form-item>
+          <j-dict-select-tag
+            v-model="queryParam.hb"
+            style="width: 150px"
+            placeholder="选择行别"
+            dict-code="sj_plan_status"
+          />
+        </a-form-item>
+        <a-form-item>
+          <j-dict-select-tag
+            v-model="queryParam.yy"
+            style="width: 150px"
+            placeholder="选择原因类型"
+            dict-code="sj_plan_status"
+          />
+        </a-form-item>
+        <a-form-item>
+          <a-input
+            v-model="queryParam.glb"
+            style="width: 150px"
+            placeholder="输入公里标"
+          />
+        </a-form-item>
+        <a-form-item>
+          <a-date-picker v-model="queryParam.date1" format="YYYY/MM/DD" placeholder="时间范围" />-
+          <a-date-picker v-model="queryParam.date2" format="YYYY/MM/DD" placeholder="时间范围" />
+        </a-form-item>
+        <a-form-item>
+          <a-button type="primary" @click="searchQuery">查询</a-button>
+          <a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
+        </a-form-item>
+      </a-form>
+    </div>
+
+    <!-- 操作按钮区域 -->
+    <div class="table-operator" style="margin-top: 5px">
+      <a-button type="primary" icon="plus" @click="handleAdd">新增</a-button>
+      <a-button type="primary" icon="download" @click="handleExportXls('角色信息')">导出</a-button>
+      <a-upload name="file" :show-upload-list="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
+        <a-button type="primary" icon="import">导入</a-button>
+      </a-upload>
+
+      <a-dropdown v-if="selectedRowKeys.length > 0">
+        <a-menu slot="overlay">
+          <a-menu-item key="1" @click="batchDel"><a-icon type="delete" />删除</a-menu-item>
+        </a-menu>
+        <a-button style="margin-left: 8px">
+          批量操作 <a-icon type="down" />
+        </a-button>
+      </a-dropdown>
+    </div>
+
+    <!-- table区域-begin -->
+    <div>
+      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
+        <i class="anticon anticon-info-circle ant-alert-icon" /> 已选择&nbsp;<a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项&nbsp;&nbsp;
+        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
+      </div>
+
+      <a-table
+        ref="table"
+        size="middle"
+        bordered
+        row-key="id"
+        :columns="columns"
+        :data-source="dataSource"
+        :pagination="ipagination"
+        :loading="loading"
+        :row-selection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
+        @change="handleTableChange"
+      >
+
+        <span slot="action" slot-scope="text, record">
+          <a-button size="small" type="primary" @click="handleEdit(record)">
+            编辑
+          </a-button>
+          <a-divider type="vertical" />
+          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
+            <a-button size="small" type="danger">
+              删除
+            </a-button>
+          </a-popconfirm>
+        </span>
+      </a-table>
+      <check-and-edit-model ref="modalForm" @ok="modalFormOk" />
+    </div>
+    <!-- table区域-end -->
+    <!-- 表单区域 -->
+  </el-card>
+</template>
+<script>
+import { listMixin } from '@/mixin/listMixin'
+import columns from './indexColumns'
+import CheckAndEditModel from './CheckAndEditModel'
+
+export default {
+  name: 'RoleList',
+  components: {
+    CheckAndEditModel
+  },
+  mixins: [listMixin],
+  data() {
+    return {
+      // 查询条件
+      queryParam: {},
+      // 表头
+      columns: columns(this),
+      url: {
+        list: '/busFjxgmd/getListByZz',
+        delete: '/business/catenary/bus/zzdzxx/'
+      }
+    }
+  },
+  computed: {
+    importExcelUrl: function() {
+      return `${this.url.importExcelUrl}`
+    }
+  },
+  methods: {
+  }
+}
+</script>
+<style scoped>
+  @import '~@/assets/less/common.less'
+</style>

src/views/basics/add/indexColumns.js

@@ -0,0 +1,79 @@
+function columns(vm) {
+  const cols = [
+    {
+      title: '序号',
+      key: 'rowIndex',
+      width: 60,
+      align: 'center',
+      customRender: function(t, r, index) {
+        return parseInt(index) + 1
+      }
+    },
+    {
+      title: '线别',
+      align: 'center',
+      dataIndex: 'xb',
+      scopedSlots: { customRender: 'xb' },
+      key: 'xb',
+      width: 300
+    },
+    {
+      title: '区间/站场',
+      align: 'center',
+      dataIndex: 'qj',
+      key: 'qj'
+    },
+    {
+      title: '车间/工区',
+      align: 'center',
+      dataIndex: 'bm',
+      key: 'bm'
+    },
+    {
+      title: '行别',
+      align: 'center',
+      dataIndex: 'hb',
+      key: 'hb'
+    },
+    {
+      title: '支柱号',
+      align: 'center',
+      dataIndex: 'zzh',
+      key: 'zzh'
+    },
+    {
+      title: '公里标',
+      align: 'center',
+      dataIndex: 'glb',
+      key: 'glb'
+    },
+    {
+      title: '规格型号',
+      align: 'center',
+      dataIndex: 'zzxh',
+      key: 'zzxh'
+    },
+    {
+      title: '支柱类型',
+      align: 'center',
+      dataIndex: 'zzlx',
+      key: 'zzlx'
+    },
+    {
+      title: '安装时间',
+      align: 'center',
+      dataIndex: 'createTime',
+      key: 'createTime'
+    },
+    {
+      title: '操作',
+      dataIndex: 'action',
+      align: 'center',
+      slots: { title: 'actionName' },
+      scopedSlots: { customRender: 'action' }
+    }
+  ]
+  return cols
+}
+
+export default columns