devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue树形表格

作者：知新_RL | 2024-08-28 19:54:38

赞

踩

vue树形表格

需求：

现在区政府里需要调查各个乡镇的农户信息和农药使用情况。

但由于信息量太大，所以把它细分到各个村，各个组里去填写这两个表的填写情况。

现在我们以村为单位，划分调查任务。

（后期刁钻的细节是：设置用户权限，比如县级能分配任务，乡镇级别的可以填报任务）

x.vue

  1. <template>
  2. <div class="mod-work">
  3. <el-form :inline="true :model="searchForm">
  4. <el-form-item>
  5. <el-input v-model="searchForm.name"
  6.  placeholder="填报单位"
  7.   clearable>
  8. </el-input>
  9. </el-form-item>
  10. <el-form-item>
  11. <button >查询</button>
  12. <button 
  13. v-if="isAuth('pesticide:crop:save')"
  14. type="primary"
  15. @click="addOrUpdateHandle()"
  16. >新增</button>
  17. <button
  18.  v-if="isAuth('pesticide:crop:delete')"
  19.  type="danger"
  20.  @click="deleteHandle()"
  21.  :disabled="dataListSelections.length <= 0"
  22.  >批量删除</button>
  23. </el-form-item>
  24. <el-form>
  25.   <el-table 
  26.   :data="dataList" 
  27.    @selection-change="selectionChangeHandle"
  28.   border 
  29.   style="width: 100%">
  30.   <el-table-column 
  31.   type="selection" 
  32.   header-align="center" 
  33.   align="center"
  34.   width="50">
  35.   </el-table-column>
  36.   <el-table-column
  37.         prop=""
  38.         header-align="center"
  39.         align="left"
  40.         width="80"
  41.         label="ID"
  42.       >
  43.       </el-table-column>
  44.   <el-table-column
  45.   prop=""
  46.   header-align="center"
  47.   align="left"
  48.   treeKey="menuId"
  49.   width="150"
  50.   label="任务名">
  51. </el-table-column>
  52.   <el-table-column prop=""
  53.    header-align="center" 
  54.    align="left" 
  55.    width="150" 
  56.    label="开始时间">
  57.   </el-table-column>
  58.   <el-table-column prop="" 
  59.   header-align="center" 
  60.   align="left" 
  61.   width="150" 
  62.   label="截止时间">
  63.   </el-table-column>
  64.    <el-table-column
  65.   prop=""
  66.   header-align="center"
  67.   align="left"
  68.   width="150"
  69.   label="截止时间">
  70.   </el-table-column>
  71.  <el-table-column
  72.         fixed="right"
  73.         header-align="center"
  74.         align="center"
  75.         width="150"
  76.         label="操作"
  77.       >
  78.         <template slot-scope="scope">
  79.           <el-button
  80.             v-if="isAuth('')"
  81.             type="text"
  82.             size="small"
  83.             @click="addOrUpdateHandle(scope.row.)"
  84.             >修改
  85.           </el-button>
  86.           <el-button
  87.             v-if="isAuth('sys:menu:delete')"
  88.             type="text"
  89.             size="small"
  90.             @click="deleteHandle(scope.row.)"
  91.           >
  92.             删除
  93.           </el-button>
  94.         </template>
  95.       </el-table-column>
  96.       <el-table-column 
  97.       prop="parentName" 
  98.       header-align="center" 
  99.       align="center" 
  100.       width="120" 
  101.       label="填写状态">
  102.       </el-table-column>
  103.   </el-table>
  104. <!-- 弹窗, 新增 / 修改 -->
  105. <add-or-update 
  106. v-if="addOrUpdateVisible" 
  107. ref="addOrUpdate" 
  108. @refreshDataList="getDataList"
  109. ></add-or-update>
  110. </div>
  111. </template>
  112.  
  113. <script>
  114.   import TableTreeColumn from '@/components/table-tree-column'
  115.   import AddOrUpdate from './list-add-or-update'
  116. export default{
  117.   data(){
  118.     return{
  119.        searchForm: {},
  120.        dataList: [],
  121.        addOrUpdateVisible:false
  122.     }
  123.   },
  124.   components:{
  125.     TableTreeColumn,
  126.     AddOrUpdate
  127.   },
  128.   activated(){
  129.     this.getDateList()
  130.   },
  131.   methods:{
  132.     // 获取数据列表
  133.     getDataList() {
  134.       this.$http({
  135.         url: '',
  136.         method: 'get'
  137.       }).then(({ data }) => {
  138.         this.dataList = this.treeDataTranslate(data.menuList, '', 'parentId', 'childrens')
  139.       })
  140.     },
  141.      // 新增 / 修改
  142.     addOrUpdateHandle(id) {
  143.       this.addOrUpdateVisible = true
  144.       this.$nextTick(() => {
  145.         this.$refs.addOrUpdate.init(id)
  146.       })
  147.     },
  148.    
  149.     // 删除
  150.     deleteHandle(id) {
  151.       let ids = id ? [id] : this.dataListSelections.map(item => {
  152.         return item.id
  153.       })
  154.       this.$confirm('确定对所选项进行[删除]操作?', '提示', {
  155.         confirmButtonText: '确定',
  156.         cancelButtonText: '取消',
  157.         type: 'warning'
  158.       }).then(() => {
  159.         this.$http({
  160.           url: '',
  161.           method: 'post',
  162.           data: ids
  163.         }).then(({ data }) => {
  164.           if (data && data.code === 0) {
  165.             this.$message({
  166.               message: '操作成功',
  167.               type: 'success',
  168.               duration: 1500
  169.             })
  170.             this.getDataList()
  171.           }
  172.         })
  173.       }).catch(() => {
  174.       })
  175.     }
  176.   }
  177. }
  178. </script>

x.add-or-update.com

  1. <template>
  2. <el-dialog
  3.     :title="!dataForm.id ? '新增' : '修改'"
  4.     :close-on-click-modal="false"
  5.     :visible.sync="visible">
  6.    <el-form
  7.     :model="dataForm"
  8.       :rules="dataRule"
  9.       ref="dataForm"
  10.       @keyup.enter.native="dataFormSubmit()"
  11.       label-width="80px">
  12.       <el-form-item label="类型" prop="type">
  13.         <el-radio-group v-model="dataForm.type">
  14.           <el-radio v-for="(type, index) in dataForm.typeList" :label="index" :key="index">{{ type }}</el-radio>
  15.         </el-radio-group>
  16.       </el-form-item>
  17. <el-form-item :label="dataForm.typeList[dataForm.type] + '名称'" prop="name">
  18.         <el-input v-model="dataForm.name" :placeholder="dataForm.typeList[dataForm.type] + '名称'"></el-input>
  19.       </el-form-item>
  20. <el-form-item label="上级菜单" prop="parentName">
  21.         <el-dialog
  22.           width="30%"
  23.           append-to-body
  24.           title="选择上级菜单"
  25.           :visible.sync="visiblePopover">
  26.           <el-tree
  27.             :data="menuList"
  28.             :props="menuListTreeProps"
  29.             node-key="menuId"
  30.             @current-change="menuListTreeCurrentChangeHandle"
  31.             default-expand-all
  32.             :expand-on-click-node="false">
  33.           </el-tree>
  34.         </el-dialog>
  35.         <el-button @click="visiblePopover = true">{{dataForm.parentName||'点击选择上级菜单'}}</el-button>
  36.       </el-form-item>
  37.         <el-form-item v-if="dataForm.type === 0 || 1" 
  38.         label="年份" 
  39.         prop=""
  40.         :rules="[{ required: true, message: '请选择年份', trigger: 'blur' }]"
  41.        >
  42.         <!-- <el-input v-model="dataForm.url" placeholder="年份"></el-input> -->
  43.         <!-- <el-input
  44.             v-model="dataForm.dateyear"
  45.             :disabled="disabled"
  46.             placeholder="年份"
  47.           ></el-input> -->
  48.         <el-date-picker
  49.           type="year"
  50.           placeholder="选择年份"
  51.           v-model="dataForm.cropName"
  52.           style="width: 100%"
  53.           format="yyyy"
  54.           value-format="yyyy"
  55.           :disabled="disabled"
  56.         ></el-date-picker>
  57.       </el-form-item>
  58.         <el-form-item v-if="dataForm.type === 0 || 1" 
  59.          label="开始时间"
  60.         prop=""
  61.         :rules="[
  62.           { required: true, message: '请选择开始时间', trigger: 'blur' },
  63.         ]" >
  64.         <el-date-picker
  65.           v-model="dataForm."
  66.           type="date"
  67.           placeholder="开始时间"
  68.         >
  69.         </el-date-picker>
  70.       </el-form-item>
  71.   <el-form-item v-if="dataForm.type === 0 || 1" 
  72.           label="截止时间"
  73.         prop=""
  74.         :rules="[
  75.           { required: true, message: '请选择截止时间', trigger: 'blur' },
  76.         ]"   >
  77.          <el-date-picker
  78.           v-model="dataForm."
  79.           type="date"
  80.           placeholder="截止时间"
  81.         >
  82.         </el-date-picker>
  83.       </el-form-item>
  84.   <el-form-item v-if="dataForm.type === 0 || 1" 
  85.         label="填报单位"
  86.         prop=""
  87.         :rules="[
  88.           { required: true, message: '请填写填报单位', trigger: 'blur' },
  89.         ]"
  90.         style="width: 65%" >
  91.          <el-input
  92.           v-model="dataForm."
  93.           :disabled="disabled"
  94.           maxlength="50"
  95.           placeholder="填报单位"
  96.         ></el-input>
  97.       </el-form-item>
  98. <el-form-item v-if="dataForm.type === 1" 
  99.         label="填报状态"
  100.         prop=""
  101.         :rules="[
  102.           { required: true, message: '请填写填报状态', trigger: 'blur' },
  103.         ]"
  104.         style="width: 65%" >
  105.          <el-input
  106.           v-model="dataForm."
  107.           :disabled="disabled"
  108.           maxlength="50"
  109.           placeholder="填报状态"
  110.         ></el-input>
  111.       </el-form-item>
  112.     </el-form>
  113.     <span slot="footer" class="dialog-footer">
  114.       <el-button @click="visible = false">取消</el-button>
  115.       <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
  116.     </span>
  117. </el-dialog>
  118. </template>
  119.  
  120. <script>
  121. data(){
  122.   return{
  123.     visible: false,
  124.     dataForm: {
  125.          id: '',
  126.           type: 1,
  127.           typeList: ['任务', '任务列表'],
  128.           name:'',
  129.           parentName: '',
  130.         },
  131.       dataRule: {
  132.         name: [
  133.           { required: true, message: '名称不能为空', trigger: 'blur' }
  134.         ]
  135.       },
  136.       menuList: [],
  137.         menuListTreeProps: {
  138.           label: 'name',
  139.           children: 'children'
  140.         }
  141.   }
  142. },
  143. methods{
  144.    init (id) {
  145.         this.dataForm.id = id || 0
  146.         this.$http({
  147.           url: '/sys/menu/select',
  148.           method: 'get'
  149.         }).then(({ data }) => {
  150.           this.menuList = this.treeDataTranslate(data.menuList, 'menuId')
  151.         }).then(() => {
  152.           this.visible = true
  153.           this.$nextTick(() => {
  154.             this.$refs['dataForm'].resetFields()
  155.           })
  156.         }).then(() => {
  157.           if (this.dataForm.id) {
  158.             this.$http({
  159.               url: `/sys/menu/info/${this.dataForm.id}`,
  160.               method: 'get'
  161.             }).then(({ data }) => {
  162.               if (data && data.code === 0) {
  163.               
  164.               }
  165.             })
  166.           } else {
  167.             this.dataForm.parentName = ''
  168.           }
  169.         })
  170.       },
  171.       // 菜单树选中
  172.       menuListTreeCurrentChangeHandle (data, node) {
  173.         this.dataForm.parentId = data.menuId
  174.         this.dataForm.parentName = data.name
  175.         this.visiblePopover = false
  176.       },
  177.        // 表单提交
  178.       dataFormSubmit () {
  179.         this.$refs['dataForm'].validate((valid) => {
  180.           if (valid) {
  181.             this.$http({
  182.               url: `/sys/menu/${!this.dataForm.id ? 'save' : 'update'}`,
  183.               method: 'post',
  184.               data: {
  185.                
  186.               }
  187.             }).then(({ data }) => {
  188.               if (data && data.code === 0) {
  189.                 this.$message({
  190.                   message: '操作成功',
  191.                   type: 'success',
  192.                   duration: 1500
  193.                 })
  194.                 this.visible = false
  195.                 this.$emit('refreshDataList')
  196.               }
  197.             })
  198.           }
  199.         })
  200.       }
  201. }
  202. </script>

这个项目这样写逻辑上是没错的，但是跟宽哥交流后，他说我不用这么麻烦，给每一个页面都手动去添加这两个页面。

这两个表应该是固定地分配到每一个任务上.表格里的其他字段，同时包括这两个表的二级菜单里的授权状态和填报和查看。都是后台给你返回数据的。

但是目前没有，你先借用这里面的数据接口进行一个显示，等后台有数据了之后就能直接给你传数据了。

 操作的任务里的修改和删除 还有表格的填报和查看都是写在同一列的，不同菜单显示的按钮不同，这里需要用一个判断。这个判断如何做。

 包括这个状态填报。它是怎么判断的条件。后台也会传给我？

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/1021877
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。