1.组织价格静态实现70%

loulijun2021

2023-08-10 ea065c83cb6c9b9478f5dd34f4170399df5c08ef

1.组织价格静态实现70%

 src/api/basicSettings.js

@@ -1,5 +1,14 @@
import request from '@/utils/request'

// 组织架构,查询组织信息
// export function STorgData(data) {
//   return request({
//     url: 'BasicSetting/STorgData',
//     method: 'get',
//     params: data
//   })
// }

// 角色权限查询角色
export function RolePermissionSearchRole(data) {
  return request({

 src/layout/components/Sidebar/index.vue

@@ -77,7 +77,7 @@
    activeMenu() {
      const route = this.$route
      const { meta, path } = route
      console.log(meta, path, 7)
      // console.log(meta, path, 7)
      // if set path, the sidebar will highlight the path you set
      removeCookie('ruleCode')
      setCookie('ruleCode', meta.code)// 将编码规则code存到cookie里面

 src/utils/request.js

@@ -16,7 +16,7 @@
    // do something before request is sent
    config.headers['Token'] = localStorage.getItem('token')

    config.headers['ruleCode'] = getCookie('ruleCode') // 编码规则
    // config.headers['ruleCode'] = getCookie('ruleCode') // 编码规则
    return config
  },
  error => {

 src/views/basicSettings/organizationList.vue

@@ -1,11 +1,332 @@
<template />
<template>
  <div>
    <div class="body" :style="{height:mainHeight+'px'}">
      <div
        class="elTableDiv"
      >

        <div style="width: 300px;background:#fff">

          <div style="margin: 20px 10px 0 10px;display: flex;justify-content: space-between;">
            <div style="display: flex;">
              <div
                style="width: 5px;height: 100%;border-radius: 5px;"
                :style="{background:$store.state.settings.theme}"
              />
              <div style="margin-left: 8px;">组织名称</div>
            </div>

            <!--            <div style="margin-right:10px">-->
            <!--              <i class="el-icon-plus" style="cursor: pointer;color: #999" />-->
            <!--            </div>-->
            <!--            @click="rolePlusClick"-->
          </div>

          <el-tree
            ref="treeLeftRef"
            style="padding: 10px;overflow: auto"
            :style="{height:(tableHeight-20)+'px'}"
            :data="treeLeft"
            node-key="code"
            highlight-current
            :props="defaultPropsLeft"
            :default-expand-all="true"
            :expand-on-click-node="false"
            draggable
            :allow-drop="treeLeftAllowDrop"
          >
            <!--            @node-click="treeLeftNodeClick"-->

            <span slot-scope="{ node, data }" class="custom-tree-node">
              <span v-if="!data.isEdit">{{ data.name }}</span>
              <input
                v-if="data.isEdit"
                :ref="data.code"
                v-model="data.name"
                type="text"
                @click.stop
                @blur="treeSave(data)"
                @keyup.enter="treeSave(data)"
              >

              <span v-if="!data.isEdit">
                <i
                  class="el-icon-plus"
                  style="margin-right:10px;color: #999"
                  @click.stop="val=>treeAddClick(val,node,data)"
                />
                <i
                  v-if="data.code!=='000'"
                  class="el-icon-edit"
                  style="margin-right:10px;color: #999"
                  @click.stop="val=>treeEditClick(val,node,data)"
                />
                <i
                  v-if="data.code!=='000'"
                  class="el-icon-delete"
                  style="margin-right: 4px;color: #999"
                  @click.stop="val=>treeDeleteClick(val,node,data)"
                />
              </span>
            </span>
          </el-tree>
        </div>

        <div
          style="margin-left: 10px;width:100%;position: relative"
        >

          <el-table
            ref="tableDataRef"
            class="tableFixed"
            :data="tableData"
            :height="(tableHeight-40)+'px'"
            border
            row-class-name="custom-row"
            :style="{width: 100+'%',height:(tableHeight-40)+'px',marginBottom:'10px'}"
            highlight-current-row
            :header-cell-style="this.$headerCellStyle"
            :cell-style="this.$cellStyle"
            @sort-change="sortChange"
          >
            <!--            prop="RowNum"-->
            <el-table-column
              type="index"
              width="50"
              fixed
              label="序号"
            />
            <el-table-column
              prop="code"
              label="用户编码"
              sortable="custom"
            />
            <!--            <el-table-column-->
            <!--              label="操作"-->
            <!--              width="120"-->
            <!--              fixed="right"-->
            <!--            >-->
            <!--              <template slot-scope="{row}">-->
            <!--                <div class="operationClass">-->
            <!--                  <el-tooltip class="item" effect="dark" content="编辑" placement="top">-->
            <!--                    <i class="el-icon-edit-outline" @click="edit('edit',row)" />-->
            <!--                  </el-tooltip>-->
            <!--                  <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">-->
            <!--                    <i class="el-icon-delete" @click="del(row)" />-->
            <!--                  </el-tooltip>-->
            <!--                </div>-->
            <!--              </template>-->
            <!--            </el-table-column>-->
          </el-table>

          <!--分页-->
          <pagination
            :total="total"
            :page.sync="form.page"
            :limit.sync="form.rows"
            align="right"
            layout="total,prev, pager, next,sizes,jumper"
            popper-class="select_bottom"
            @pagination="getOrganizationSearch"
          />

        </div>

      </div>

    </div>

  </div>
</template>

<script>
import waves from '@/directive/waves'
import arrayToTree from 'array-to-tree'
import { throttle } from '@/utils/debounceAndThrottle'
import Pagination from '@/components/Pagination'

export default {
  name: 'OrganizationList'
  name: 'RoleList',
  directives: { waves },
  components: {
    Pagination
  },
  data() {
    return {
      mainHeight: 0,
      tableHeight: 0,

      treeLeft: [
        {
          code: '000',
          name: '大岛电器',
          isEdit: false,
          children: [
            {
              code: '001',
              name: '研发部',
              isEdit: false,
              children: []
            }, {
              code: '002',
              name: '销售部',
              isEdit: false,
              children: []
            }, {
              code: '003',
              name: '生产部',
              isEdit: false,
              children: [
                {
                  code: '004',
                  name: '金工车间一',
                  isEdit: false,
                  children: []
                }, {
                  code: '005',
                  name: '金工车间二',
                  isEdit: false,
                  children: []
                }
              ]
            }
          ]
        }
      ], // 左侧树
      defaultPropsLeft: {
        children: 'children',
        label: 'name'
      },
      tableData: [
        { code: '001' },
        { code: '002' },
        { code: '003' }
      ],
      form: {
        page: 1,
        rows: 20
      },
      total: 0

    }
  },
  watch: {
    // treeLeft: {
    //   handler(newValue, oldValue) {
    //     newValue[0].roles.forEach(i => {
    //       if (i.isEdit) {
    //         this.$nextTick(() => {
    //           this.$refs[i.code].focus()
    //         })
    //       }
    //     })
    //   },
    //   deep: true
    // }
  },

  created() {

  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
  },
  methods: {
    // 获取页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 75
        this.tableHeight = this.mainHeight - 50
      })
    },
    // 左侧树形拖动处理
    treeLeftAllowDrop(draggingNode, dropNode, type) {
      // console.log(draggingNode, dropNode, type)
      // 注掉的是同级拖拽
      // if (draggingNode.level === dropNode.level) {
      //   return type === 'prev' || type === 'next'
      // } else {
      //   // 不同级进行处理
      //   return false
      // }
    },
    getTreeAttr(val) {
      console.log(val, 1)
      if (val['children']) {
        val['children'].push({
          code: '',
          name: '',
          isEdit: true,
          children: []
        })
      } else {
        val.children.push(
          { code: '', name: '', isEdit: true }
        )
      }
      this.$nextTick(() => {
        this.$refs[''].focus()
      })
    },
    // 角色名称保存   采用防抖形式
    treeSave: throttle(function(val) {
      val.isEdit = false

      console.log('执行了！')
    }, 1000, true),

    treeEditClick(val, node, data) {
      data.isEdit = true
      this.$nextTick(() => {
        this.$refs[data.code].focus()
      })
    },
    treeDeleteClick(val, node, data) {

    },
    treeAddClick(val, node, data) {
      // console.log(val, node, data, 2)

      // this.treeLeft = data.children.push({ code: '', name: '', isEdit: true })
      this.getTreeAttr(data)

      // console.log(this.treeLeft, 3)
    },
    sortChange({ column, prop, order }) {
      if (order === 'descending') {
        order = 'desc'
      } else if (order === 'ascending') {
        order = 'asc'
      } else {
        order = 'desc'
      }
      this.form.order = order
      this.form.prop = prop
      // this.getOrganizationSearch()
    },
    getOrganizationSearch() {

    }
  }
}
</script>

<style scoped>
<style scoped lang="scss">
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

//::v-deep .el-checkbox__label {
//  width: 55px;
//}
//
.el-icon-plus:hover, .el-icon-edit:hover, .el-icon-delete:hover {
  color: #000 !important;
}
</style>

 src/views/basicSettings/roleList.vue

@@ -68,7 +68,7 @@
        </div>

        <div
          style="margin-left: 15px;width:100%;position: relative"
          style="margin-left: 10px;width:100%;position: relative"
        >

          <el-button

 src/views/template.vue

@@ -148,7 +148,7 @@
        :page.sync="form.page"
        :limit.sync="form.rows"
        align="right"
        layout="total,prev, pager, next,sizes"
        layout="total,prev, pager, next,sizes,jumper"
        popper-class="select_bottom"
        @pagination="getOrganizationSearch"
      />