vue看板页面

目录

task-kanban.vue

task-card.vue

---

task-kanban.vue

<template lang="pug">           --组件的模板结构，用pug语法
.task-kanban                    --当前文件名
  op-query-header.task-kanban__header(  --引入封装好的query-header到task-kanban文件的头部
    ref='queryHeader',          --给query-header设置一个别名，通过他可以调用所有属性和方法 
    :config='headerConfig',             --定义config属性，下面需要为headerConfig赋值
    @search='doQuery',                  --搜索查询事件
    @click-add='add'                    --点击新增事件
  )
  op-kanban.task-kanban__kanban(        --引入封装好的kanban到task-kanban文件的看板部位
    ref='kanban',               --给kanban设置一个别名，通过他可以调用所有属性和方法
    :component='url',                   --定义组件路径，在下面需要为他赋值
    columnTypeKey='task_level',         
    dragable,                           --？？可拖拽的
    url='/tasks/kanban',                --定义后台接口路径
    :columnSize='columnSize',           --定义列的数量,下面需要为他赋值
    columnQueryKey='taskLevel',
    :queryParams='queryParams',         --定义请求参数属性,下面需要为他赋值
    @card-click='cardClick'             --定义看板点击事件
  )
  op-biz-block-form-dialog(             --引入封装好的form表单
    ref='BizBlockFormDialog',  --给biz-block-form设置一个别名，通过他可以调用所有属性和方法
    :block-id='menuMeta.blockId',       --定义block-id属性并赋值，需要在下面定义menuMeta
    biz-type='TASK',                    --定义业务类型属性
    :method='method',                   --定义方法
    @success='onSuccess'                --定义成功触发的事件
  )
</template>

<script>                               --内放置组件的行为
import magicButtonConfigHelper from '@/components/buttons/utils/magic-button-config-helper';                    --import引入magicButtonConfigHelper，为buttond的值进行转意
export default {            --出口默认值
  name: 'task-kanban',      --命名
  provide() {               --？？
    return {
      taskKanban: this,
    };
  },
  props: {                  --子组件访问父组件唯一接口
    menuMeta: {             --声明变量menuMeta,通过他引用父组件的参数
      type: Object,
      default: () => ({}),
    },
    buttons: {              --声明变量buttoms,通过他引用父组件的参数
      type: Array,
      default: () => [],
    },
  },

  data() {                 --参数
    return {               --给上面需要赋值的参数赋值并返回
      columnSize: 10,      
      url: 'task/task-card',
      queryParams: {},
      method: 'POST',
    };
  },

  computed: {               --计算属性，也算成员变量，直接调用方法名
    headerConfig() {        --为上文config参数headerConfig赋值，生成一个headerConfig方法
      return {
        filters: this.menuMeta.queryHeader?.filters ?? [],
        buttons: magicButtonConfigHelper(this.buttons),  --buttons需要对参数进行转译
      };
    },
  },
  methods: {                --定义事件、方法
    cardClick() {           --定义看板的点击事件
      this.$refs.kanban.reload();     --执行 op-kanban里面封装好的reload方法
    },
    doQuery(query) {        --定义请求头的搜索查询事件，query为传入的参数
      this.queryParams = query;      --将query的值赋给queryParams
      this.$nextTick().then(() => {  
        this.$refs.kanban.reload();   --执行kanban里的自动重载方法
      });
    },
    add() {                 --定义请求头的点击添加事件
      this.method = 'POST'; --请求方式
      this.$refs.BizBlockFormDialog.open({});  --点击后弹出一个form表单
    },
    onSuccess() {           --定义form表单成功执行完的方法
      this.$refs.kanban.reload();    --执行看板的重新加载
    },
  },
};
</script>

<style lang="scss" scoped>   --组件的样式
.task-kanban {               --为整个task-kanban页面整体渲染
  height: 100vh;
  padding: 0 var(--gutter);   0 var(--gutter) 为公司定义好的常量

  &__header {                --为task-kanban的header部位进行渲染
    height: 60px;
  }

  &__kanban {                --为task-kanban的kanban部位进行渲染
    height: calc(100vh - 150px);
  }
}
</style>

task-card.vue

<template lang="pug">          --组件的模块结构，用pug语法     
.task-card                     --当前文件名
  .task-card__task-title(@click='editTask') {{ data.taskTitle }} 
     --标记task-card的task-titel位置 执行点击事件editTask,并渲染data参数中的taskTitle
    i.el-icon-edit.task-card__edit  
     --用i标签.el-icon-edit为编辑图标.task-card为当前文件，命名为edit
  p {{ taskBizName }}                  --用p标签渲染taskBizName
  .G-flex.G-flex--row-nowrap          --???
    div {{ $formatter.selectFormat(data.leaderId, "user") }}  --???
    i.task-card__delete.el-icon-delete(       --用i标签标记task-card的delete,形式为垃圾桶
      v-if='$auth("DELETE", "/tasks")',       --？？？
      @click='deleteTask'                   --如果通过判断则执行deleteTask方法
    )
</template>

<script>
export default {               --出口默认值
  name: 'task-card',
  inject: {                    --？？？
    taskKanban: { default: '' },
  },
  props: {                     --子组件访问父组件的接口
    data: {                    --定义参数data，通过这个变量可以直接调用父组件的属性和方法
      type: Object,
      required: true,
    },
  },
  computed: {                 --计算函数
    taskBizName() {           --定义前文标签中渲染的taskBizName 
      if (this.data.bizInfos) {   --？？？？？？？
        return this.data.bizInfos.map((item) => item.bizName).join();
      }                                 --join()为把数组中的所有元素放入一个字符串
      return '';              --不符合返回为空
    },
  },
  methods: {                  --定义方法
    editTask() {              --定义标题点击事件的编辑方法
      if (this.$auth('PUT', '/tasks')) {   --??满足请求方式为put,路径为tasks的条件
        const taskData = JSON.parse(JSON.stringify(this.data));  
                              --将参数先转成字符串，在转回JSON串（内容不变地址变了）
        this.taskKanban.method = 'PUT';      --定义方法方式为put
        this.taskKanban.$refs.BizBlockFormDialog.open(taskData);   --触发form表单
      }
    },
    deleteTask() {             --定义删除方法
      this.$http.delete('/tasks', this.data).then(() => {  --？？？
        this.taskKanban.onSuccess();   --成功后调用
      });
    },
  },
};
</script>

<style lang="scss" scoped>   --样式 为style启动scss属性  scoped意思为只作用于当前作用域
.task-card {
  padding: 10px;
  text-align: left;
  border: 1px solid #dbdbdb;
  border-radius: 5px;        --添加圆角边框

  background-color: white;
  font-size: 0.8em;
  max-width: 15vw;

  &__edit {
    padding-left: 4px;
  }
  &__task-title {
    user-select: auto;    --文本将根据浏览器的默认属性选择
    cursor: pointer;      --设定鼠标形状为一只伸出食指的手
    overflow: hidden;     --溢出隐藏
    text-overflow: ellipsis;   --单行文本溢出显示省略号
    color: var(--color-primary);
  }
  &__delete {
    color: var(--color-primary);
    right: 24px;
    position: absolute;
    padding-top: 4 px;
  }
}
</style>