no message
							parent
							
								
									e8b73916c9
								
							
						
					
					
						commit
						e0fd0fcdd5
					
				| 
						 | 
					@ -2,6 +2,6 @@ ENV = 'production'
 | 
				
			||||||
 | 
					
 | 
				
			||||||
# 如果使用 Nginx 代理后端接口,那么此处需要改为 '/',文件查看 Docker 部署篇,Nginx 配置
 | 
					# 如果使用 Nginx 代理后端接口,那么此处需要改为 '/',文件查看 Docker 部署篇,Nginx 配置
 | 
				
			||||||
# 接口地址,注意协议,如果你没有配置 ssl,需要将 https 改为 http
 | 
					# 接口地址,注意协议,如果你没有配置 ssl,需要将 https 改为 http
 | 
				
			||||||
VUE_APP_BASE_API  = 'http://localhost:8010'
 | 
					VUE_APP_BASE_API  = 'http://115.159.67.99:8010'
 | 
				
			||||||
# 如果接口是 http 形式, wss 需要改为 ws
 | 
					# 如果接口是 http 形式, wss 需要改为 ws
 | 
				
			||||||
VUE_APP_WS_API = 'wss://localhost:8010'
 | 
					VUE_APP_WS_API = 'wss://115.159.67.99:8010'
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -2,7 +2,7 @@
 | 
				
			||||||
  <div class="crud-opts">
 | 
					  <div class="crud-opts">
 | 
				
			||||||
    <span class="crud-opts-left">
 | 
					    <span class="crud-opts-left">
 | 
				
			||||||
      <!--左侧插槽-->
 | 
					      <!--左侧插槽-->
 | 
				
			||||||
      <slot name="left"/>
 | 
					      <slot name="left" />
 | 
				
			||||||
      <el-button
 | 
					      <el-button
 | 
				
			||||||
        v-if="crud.optShow.add"
 | 
					        v-if="crud.optShow.add"
 | 
				
			||||||
        v-permission="permission.add"
 | 
					        v-permission="permission.add"
 | 
				
			||||||
| 
						 | 
					@ -51,7 +51,7 @@
 | 
				
			||||||
        @click="crud.doExport"
 | 
					        @click="crud.doExport"
 | 
				
			||||||
      >导出</el-button>
 | 
					      >导出</el-button>
 | 
				
			||||||
      <!--右侧-->
 | 
					      <!--右侧-->
 | 
				
			||||||
      <slot name="right"/>
 | 
					      <slot name="right" />
 | 
				
			||||||
    </span>
 | 
					    </span>
 | 
				
			||||||
    <el-button-group class="crud-opts-right">
 | 
					    <el-button-group class="crud-opts-right">
 | 
				
			||||||
      <el-button
 | 
					      <el-button
 | 
				
			||||||
| 
						 | 
					@ -106,7 +106,7 @@
 | 
				
			||||||
  </div>
 | 
					  </div>
 | 
				
			||||||
</template>
 | 
					</template>
 | 
				
			||||||
<script>
 | 
					<script>
 | 
				
			||||||
import CRUD, {crud} from '@crud/crud'
 | 
					import CRUD, { crud } from '@crud/crud'
 | 
				
			||||||
import crudTableConfig from '@/api/tableConfig'
 | 
					import crudTableConfig from '@/api/tableConfig'
 | 
				
			||||||
import Sortable from 'sortablejs'
 | 
					import Sortable from 'sortablejs'
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -130,28 +130,22 @@ export default {
 | 
				
			||||||
  props: {
 | 
					  props: {
 | 
				
			||||||
    permission: {
 | 
					    permission: {
 | 
				
			||||||
      type: Object,
 | 
					      type: Object,
 | 
				
			||||||
      default: () => {
 | 
					      default: () => { return {} }
 | 
				
			||||||
        return {}
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    ignoreColumns: {
 | 
					    ignoreColumns: {
 | 
				
			||||||
      type: Array,
 | 
					      type: Array,
 | 
				
			||||||
      default: () => {
 | 
					      default: () => { return [] }
 | 
				
			||||||
        return []
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    tableKey: {
 | 
					    tableKey: {
 | 
				
			||||||
      type: String,
 | 
					      type: String,
 | 
				
			||||||
      default: () => {
 | 
					      default: () => { return '' }
 | 
				
			||||||
        return ''
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
  },
 | 
					  },
 | 
				
			||||||
  data() {
 | 
					  data() {
 | 
				
			||||||
    return {
 | 
					    return {
 | 
				
			||||||
      hiddenColumns: [],
 | 
					      hiddenColumns:[],
 | 
				
			||||||
      table_configs: [],
 | 
					      table_configs:[],
 | 
				
			||||||
      table_configs_xs: [],
 | 
					      table_configs_xs:[],
 | 
				
			||||||
      tableColumns: [],
 | 
					      tableColumns: [],
 | 
				
			||||||
      allColumnsSelected: true,
 | 
					      allColumnsSelected: true,
 | 
				
			||||||
      allColumnsSelectedIndeterminate: false,
 | 
					      allColumnsSelectedIndeterminate: false,
 | 
				
			||||||
| 
						 | 
					@ -178,45 +172,62 @@ export default {
 | 
				
			||||||
  mounted() {
 | 
					  mounted() {
 | 
				
			||||||
    //初始化数据
 | 
					    //初始化数据
 | 
				
			||||||
    this.columnDrop();
 | 
					    this.columnDrop();
 | 
				
			||||||
    this.hiddenColumns = JSON.parse(sessionStorage.getItem(this.tableKey));
 | 
					 | 
				
			||||||
    setTimeout(() => {
 | 
					    setTimeout(() => {
 | 
				
			||||||
      // 方法区
 | 
					      // 方法区
 | 
				
			||||||
      this.initcolumn();
 | 
					      this.initcolumn();
 | 
				
			||||||
    }, 600)
 | 
					    }, 200)
 | 
				
			||||||
    setTimeout(() => {
 | 
					
 | 
				
			||||||
      // 方法区
 | 
					 | 
				
			||||||
      this.showcolumn();
 | 
					 | 
				
			||||||
    }, 1000)
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
  },
 | 
					  },
 | 
				
			||||||
  methods: {
 | 
					  methods: {
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    initcolumn() {
 | 
					    initcolumn() {
 | 
				
			||||||
      this.updateTableColumns()
 | 
					      this.updateTableColumns()
 | 
				
			||||||
      const table = this.crud.props.table
 | 
					      const strHidden=sessionStorage.getItem(this.tableKey)
 | 
				
			||||||
      this.table_configs_xs.forEach((column, index) => {
 | 
					      this.hiddenColumns= JSON.parse(strHidden);
 | 
				
			||||||
        const vm = table.$children.find(e => e.label === column.label)
 | 
					      if(this.hiddenColumns.length>0){
 | 
				
			||||||
        const columnConfig = vm.columnConfig
 | 
					        console.log("------移除---------------")
 | 
				
			||||||
        vm.owner.store.commit('removeColumn', columnConfig, null)
 | 
					        const table = this.crud.props.table
 | 
				
			||||||
      })
 | 
					        this.table_configs_xs.forEach((column,index) => {
 | 
				
			||||||
      this.ignoreNextTableColumnsChange = false
 | 
					          const vm = table.$children.find(e => e.label === column.label)
 | 
				
			||||||
    },
 | 
					
 | 
				
			||||||
    showcolumn() {
 | 
					 | 
				
			||||||
      const table = this.crud.props.table
 | 
					 | 
				
			||||||
      if(this.hiddenColumns!== undefined && this.hiddenColumns!=null){
 | 
					 | 
				
			||||||
        this.hiddenColumns.forEach((column, index) => {
 | 
					 | 
				
			||||||
          const vm = table.$children.find(e => e.prop === column.property)
 | 
					 | 
				
			||||||
          const columnConfig = vm.columnConfig
 | 
					          const columnConfig = vm.columnConfig
 | 
				
			||||||
          if (column.visible) {
 | 
					
 | 
				
			||||||
            columnConfig.width = column.width
 | 
					
 | 
				
			||||||
            columnConfig.visible = column.visible
 | 
					          console.log(columnConfig)
 | 
				
			||||||
            vm.owner.store.commit('insertColumn', columnConfig, index + 1, null)
 | 
					          vm.owner.store.commit('removeColumn', columnConfig, null)
 | 
				
			||||||
          }
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
        })
 | 
					        })
 | 
				
			||||||
        this.updateTableColumns();
 | 
					        this.ignoreNextTableColumnsChange = false
 | 
				
			||||||
 | 
					        console.log("--------移除完成-------------")
 | 
				
			||||||
 | 
					        setTimeout(() => {
 | 
				
			||||||
 | 
					          // 方法区
 | 
				
			||||||
 | 
					          this.showcolumn();
 | 
				
			||||||
 | 
					        }, 200)
 | 
				
			||||||
      }
 | 
					      }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      //vm.owner.store.commit('insertColumn', columnConfig, newIndex+myindex + 1 , null)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    },
 | 
				
			||||||
 | 
					    showcolumn() {
 | 
				
			||||||
 | 
					      console.log("------显示列------")
 | 
				
			||||||
 | 
					      const strHidden=sessionStorage.getItem(this.tableKey)
 | 
				
			||||||
 | 
					      this.hiddenColumns= JSON.parse(strHidden);
 | 
				
			||||||
 | 
					      const table = this.crud.props.table
 | 
				
			||||||
 | 
					      this.hiddenColumns.forEach((column,index) => {
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        const vm = table.$children.find(e => e.prop === column.property)
 | 
				
			||||||
 | 
					        const columnConfig = vm.columnConfig
 | 
				
			||||||
 | 
					        console.log(columnConfig.label)
 | 
				
			||||||
 | 
					        if(column.visible){
 | 
				
			||||||
 | 
					          columnConfig.width=column.width
 | 
				
			||||||
 | 
					          columnConfig.visible=column.visible
 | 
				
			||||||
 | 
					          vm.owner.store.commit('insertColumn', columnConfig, index+1  , null)
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					      })
 | 
				
			||||||
 | 
					      console.log("------显示列完成------")
 | 
				
			||||||
 | 
					      this. updateTableColumns();
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    //列拖拽
 | 
					    //列拖拽
 | 
				
			||||||
    columnDrop() {
 | 
					    columnDrop() {
 | 
				
			||||||
| 
						 | 
					@ -226,49 +237,51 @@ export default {
 | 
				
			||||||
        delay: 0,
 | 
					        delay: 0,
 | 
				
			||||||
        onEnd: evt => {
 | 
					        onEnd: evt => {
 | 
				
			||||||
          // 根据中文label进行拖拉
 | 
					          // 根据中文label进行拖拉
 | 
				
			||||||
          this.ColumnsDrop(evt.item.innerText, evt.newIndex)
 | 
					          this.ColumnsDrop(evt.item.innerText,evt.newIndex)
 | 
				
			||||||
        }
 | 
					        }
 | 
				
			||||||
      })
 | 
					      })
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    //新加方法
 | 
					    //新加方法
 | 
				
			||||||
    ColumnsDrop(oldText, newIndex) {
 | 
					    ColumnsDrop(oldText,newIndex) {
 | 
				
			||||||
      const table = this.crud.props.table
 | 
					      const table = this.crud.props.table
 | 
				
			||||||
      let myindex = -1 //空格
 | 
					      let myindex = -1 //空格
 | 
				
			||||||
      let oldIndex1 = 0
 | 
					      let oldIndex1 = 0
 | 
				
			||||||
      let step = -1
 | 
					      let  step = -1
 | 
				
			||||||
      let count = 0
 | 
					      let count = 0
 | 
				
			||||||
      //
 | 
					      //
 | 
				
			||||||
      this.tableColumns.some((column, index) => {
 | 
					      this.tableColumns.some((column,index) => {
 | 
				
			||||||
        if (column.visible) {
 | 
					        if(column.visible) {
 | 
				
			||||||
          count++
 | 
					          count++
 | 
				
			||||||
        }
 | 
					        }
 | 
				
			||||||
      })
 | 
					      })
 | 
				
			||||||
      // 定位拖拉中文表头位置以及在该字段之前隐藏字段数量
 | 
					      // 定位拖拉中文表头位置以及在该字段之前隐藏字段数量
 | 
				
			||||||
      this.tableColumns.some((column, index) => {
 | 
					      this.tableColumns.some((column,index) => {
 | 
				
			||||||
        if (column.label === oldText) {
 | 
					        if(column.label === oldText) {
 | 
				
			||||||
          oldIndex1 = index
 | 
					          oldIndex1 = index
 | 
				
			||||||
          return true
 | 
					          return true
 | 
				
			||||||
        } else {
 | 
					        }else{
 | 
				
			||||||
          // 空格在字段前面
 | 
					          // 空格在字段前面
 | 
				
			||||||
          if (step > index) {
 | 
					          if(step>index){
 | 
				
			||||||
            myindex++
 | 
					            myindex++
 | 
				
			||||||
          }
 | 
					          }
 | 
				
			||||||
        }
 | 
					        }
 | 
				
			||||||
        step++
 | 
					        step++
 | 
				
			||||||
      })
 | 
					      })
 | 
				
			||||||
      if (myindex === -1) {
 | 
					      if (myindex === -1  ) {
 | 
				
			||||||
        myindex = 0
 | 
					        myindex = 0
 | 
				
			||||||
      }
 | 
					      }
 | 
				
			||||||
      let item = this.tableColumns[oldIndex1]
 | 
					      let item= this.tableColumns[oldIndex1]
 | 
				
			||||||
      const vm = table.$children.find(e => e.prop === item.property)
 | 
					      const vm = table.$children.find(e => e.prop === item.property)
 | 
				
			||||||
      const columnConfig = vm.columnConfig
 | 
					      const columnConfig = vm.columnConfig
 | 
				
			||||||
      if (oldIndex1 < newIndex) { // 从左至右拖动
 | 
					      /*this.tableColumns.splice(oldIndex1-1, 1)
 | 
				
			||||||
        vm.owner.store.commit('insertColumn', columnConfig, newIndex + myindex, null)
 | 
					      this.tableColumns.splice(myindex-1, 0, item)*/
 | 
				
			||||||
 | 
					      if(oldIndex1 <newIndex){ // 从左至右拖动
 | 
				
			||||||
 | 
					        vm.owner.store.commit('insertColumn', columnConfig, newIndex+myindex  , null)
 | 
				
			||||||
        vm.owner.store.commit('removeColumn', columnConfig, null)
 | 
					        vm.owner.store.commit('removeColumn', columnConfig, null)
 | 
				
			||||||
      } else { //从右至左拖动
 | 
					      }else { //从右至左拖动
 | 
				
			||||||
        vm.owner.store.commit('removeColumn', columnConfig, null)
 | 
					        vm.owner.store.commit('removeColumn', columnConfig, null)
 | 
				
			||||||
        vm.owner.store.commit('insertColumn', columnConfig, newIndex + myindex, null)
 | 
					        vm.owner.store.commit('insertColumn', columnConfig, newIndex+myindex  , null)
 | 
				
			||||||
      }
 | 
					      }
 | 
				
			||||||
      // 列重新排序
 | 
					      // 列重新排序
 | 
				
			||||||
      this.ignoreNextTableColumnsChange = false
 | 
					      this.ignoreNextTableColumnsChange = false
 | 
				
			||||||
| 
						 | 
					@ -292,6 +305,7 @@ export default {
 | 
				
			||||||
      const fullTableColumns = table.$children.map(e => e.columnConfig).filter(columnFilter)
 | 
					      const fullTableColumns = table.$children.map(e => e.columnConfig).filter(columnFilter)
 | 
				
			||||||
      cols = sortWithRef(fullTableColumns, refCols)
 | 
					      cols = sortWithRef(fullTableColumns, refCols)
 | 
				
			||||||
      cols.forEach(config => {
 | 
					      cols.forEach(config => {
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        const column = {
 | 
					        const column = {
 | 
				
			||||||
          property: config.property,
 | 
					          property: config.property,
 | 
				
			||||||
          label: config.label,
 | 
					          label: config.label,
 | 
				
			||||||
| 
						 | 
					@ -338,7 +352,7 @@ export default {
 | 
				
			||||||
      })
 | 
					      })
 | 
				
			||||||
      if (selectedCount === 0) {
 | 
					      if (selectedCount === 0) {
 | 
				
			||||||
        this.crud.notify('请至少选择一列', CRUD.NOTIFICATION_TYPE.WARNING)
 | 
					        this.crud.notify('请至少选择一列', CRUD.NOTIFICATION_TYPE.WARNING)
 | 
				
			||||||
        this.$nextTick(function () {
 | 
					        this.$nextTick(function() {
 | 
				
			||||||
          item.visible = true
 | 
					          item.visible = true
 | 
				
			||||||
        })
 | 
					        })
 | 
				
			||||||
        return
 | 
					        return
 | 
				
			||||||
| 
						 | 
					@ -346,9 +360,23 @@ export default {
 | 
				
			||||||
      this.allColumnsSelected = selectedCount === totalCount
 | 
					      this.allColumnsSelected = selectedCount === totalCount
 | 
				
			||||||
      this.allColumnsSelectedIndeterminate = selectedCount !== totalCount && selectedCount !== 0
 | 
					      this.allColumnsSelectedIndeterminate = selectedCount !== totalCount && selectedCount !== 0
 | 
				
			||||||
      this.updateColumnVisible(item)
 | 
					      this.updateColumnVisible(item)
 | 
				
			||||||
 | 
					      /*const columns = []
 | 
				
			||||||
 | 
					      this.tableColumns.forEach(column => {
 | 
				
			||||||
 | 
					        if(column.visible==false){
 | 
				
			||||||
 | 
					          columns.push(column.property)
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					        console.log("-"+column.property+"--"+column.visible)
 | 
				
			||||||
 | 
					      })
 | 
				
			||||||
 | 
					      const post_table_config = {
 | 
				
			||||||
 | 
					        value: JSON.stringify(columns),
 | 
				
			||||||
 | 
					        tableType: this.tableKey
 | 
				
			||||||
 | 
					      }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      crudTableConfig.add(post_table_config)*/
 | 
				
			||||||
 | 
					      //this.postToTableConfig();
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    postToTableConfig() {
 | 
					    postToTableConfig(){
 | 
				
			||||||
      this.updateTableColumns();
 | 
					      this. updateTableColumns();
 | 
				
			||||||
      const columns = []
 | 
					      const columns = []
 | 
				
			||||||
      this.tableColumns.forEach(column => {
 | 
					      this.tableColumns.forEach(column => {
 | 
				
			||||||
        const table_config = {
 | 
					        const table_config = {
 | 
				
			||||||
| 
						 | 
					@ -364,11 +392,11 @@ export default {
 | 
				
			||||||
        tableType: this.tableKey
 | 
					        tableType: this.tableKey
 | 
				
			||||||
      }
 | 
					      }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
      this.crud.loading = true
 | 
					      this.crud.loading=true
 | 
				
			||||||
      crudTableConfig.add(post_table_config).then(res => {
 | 
					      crudTableConfig.add(post_table_config).then(res => {
 | 
				
			||||||
        setTimeout(() => {
 | 
					        setTimeout(() => {
 | 
				
			||||||
          // 方法区
 | 
					          // 方法区
 | 
				
			||||||
          this.crud.loading = false
 | 
					          this.crud.loading=false
 | 
				
			||||||
        }, 500)
 | 
					        }, 500)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
      })
 | 
					      })
 | 
				
			||||||
| 
						 | 
					@ -383,7 +411,7 @@ export default {
 | 
				
			||||||
      if (item.visible) {
 | 
					      if (item.visible) {
 | 
				
			||||||
        // 找出合适的插入点
 | 
					        // 找出合适的插入点
 | 
				
			||||||
        const columnIndex = this.tableColumns.indexOf(item)
 | 
					        const columnIndex = this.tableColumns.indexOf(item)
 | 
				
			||||||
        vm.owner.store.commit('insertColumn', columnConfig, columnIndex + 1, null)
 | 
					        vm.owner.store.commit('insertColumn', columnConfig, columnIndex+1, null)
 | 
				
			||||||
      } else {
 | 
					      } else {
 | 
				
			||||||
        vm.owner.store.commit('removeColumn', columnConfig, null)
 | 
					        vm.owner.store.commit('removeColumn', columnConfig, null)
 | 
				
			||||||
      }
 | 
					      }
 | 
				
			||||||
| 
						 | 
					@ -403,11 +431,9 @@ export default {
 | 
				
			||||||
  display: flex;
 | 
					  display: flex;
 | 
				
			||||||
  align-items: center;
 | 
					  align-items: center;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					 | 
				
			||||||
.crud-opts .crud-opts-right {
 | 
					.crud-opts .crud-opts-right {
 | 
				
			||||||
  margin-left: auto;
 | 
					  margin-left: auto;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					 | 
				
			||||||
.crud-opts .crud-opts-right span {
 | 
					.crud-opts .crud-opts-right span {
 | 
				
			||||||
  float: left;
 | 
					  float: left;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
		Reference in New Issue