老师我学完课程，找了个工作，公司安排的项目任务看不懂
我要做的页面，差不多就是这样。
现在的雏形是这样：
自动生成的代码是这样
<template>
<div class="full-content">
<div class="table-content">
<!-- 搜索区域 -->
<vt-filter
:data="filterInfo.data"
:field-list="filterInfo.fieldList"
:list-type-info="filterInfo.listTypeInfo"
@handleSearch="handleSearch"
@handleReset="handleReset"
/>
<!-- 操作区域 -->
<vt-deploy
:col-list="tableInfo.columns"
@handleRefresh="handleRefresh"
@updateColList="updateColList"
/>
<!-- 表格区域 -->
<vt-table-plus
ref="VtTablePlus"
:key="componentKey"
:sn-visible="true"
:data="tableInfo.data"
:columns="tableInfo.columns"
:loading="tableInfo.loading"
:pagination="pagination"
@handleSelect="handleSelect"
@handleSizeChange="handleSizeChange"
@handleCurrentChange="handleCurrentChange"
/>
</div>
</div>
</template>
<script>
/**
* @author user<E-mail@vtstar.net>
* @desc 业务内容
* @date 2021-02-02
*/
import { filterInfo, tableInfo } from './data';
export default {
name: '',
components: {
},
data() {
return {
/**
* filter
*/
filterData: {},
filterInfo: _.cloneDeep({ ...filterInfo }),
/**
* table
*/
componentKey: true,
tableInfo: _.cloneDeep({ ...tableInfo }),
selectData: [], //table被选中数据
pagination: {}
}
},
mounted() {
},
methods: {
/**
* table
*/
// getData
getTableList() {
let query = {
pageNum: this.pagination.pageNum,
pageSize: this.pagination.pageSize,
...this.filterData,
}
if (Array.isArray(this?.filterData?.applyTime)) {
query.applyTimeBegin = this?.filterData?.applyTime?.[0] || null
query.applyTimeEnd = this?.filterData?.applyTime?.[1] || null
}
delete query.applyTime
this.$service(
'GET',
this.$global.bus + '/api/apply/page',
query
).then(res => {
this.pagination.total = res.total
this.tableInfo.data = _.cloneDeep(res.list)
})
},
//表格选择变化触发
handleSelect(data) {
this.selectData = _.cloneDeep(data)
},
/**
* deploy
*/
handleAdd() {
this.$refs.AddForDialog.visible = true
},
handleView() {
this.$refs.ViewForDialog.visible = true
this.$refs.ViewForDialog.id = this.selectData[0].id
},
handleCancel() {
this.$refs.ViewForDialog.visible = false
},
handleEdit() {
this.$refs.EditForDialog.visible = true
this.$refs.EditForDialog.id = this.selectData[0].id
},
handlewithdraw() {
if (this.selectData && this.selectData.length > 0) {
this.$confirm("是否撤回此次提交?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(async () => {
try {
let query = {
idList: this.selectData.map(item => item.id)
}
await this.$service(
"PUT",
this.$global.bus + `/api/apply/revert`,
query
)
this.$message.success("撤回成功")
await this.getTableList()
} catch (err) {
throw err;
}
})
}
},
handleReceive() {
if (this.selectData && this.selectData.length > 0) {
this.$confirm("确认收到奖补", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(async () => {
try {
let query = {
idList: this.selectData.map(item => item.id)
}
await this.$service(
"PUT",
this.$global.bus + `/api/apply/confirm`,
query
)
this.$message.success("已收到奖补")
await this.getTableList()
} catch (err) {
throw err;
}
})
}
},
// delete
handleDel() {
if (this.selectData && this.selectData.length > 0) {
this.$confirm("此操作将永久删除数据, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(async () => {
try {
let query = {
idList: this.selectData.map(item => item.id)
}
await this.$service(
"DELETE",
this.$global.bus + `/api/apply/del`,
query
)
this.$message.success("删除成功")
await this.getTableList()
} catch (err) {
throw err;
}
})
}
},
handleProgress() {
this.$refs.ViewForProcess.visible = true;
this.$refs.ViewForProcess.id = this.selectData[0].id;
},
/**
* filter
*/
getApplyStatusList() {
this.$service(
'POST',
this.$global.bus + '/api/base/enum/{type}',
{type: 1}
).then(res => {
this.filterInfo.listTypeInfo.applyStatusList = res.statusList.map(item => {
item.name = item.desc
return item
})
})
},
handleCurrentChange(){},
handleSizeChange(){},
updateColList() {},
handleRefresh(){},
handleSearch(){},
handleReset(){}
},
}
</script>
<style lang='scss' scoped >
</style>
我该怎么去开发代码呢？ 什么样的思路和步骤呢？
怎么获取数据？
可以指导一下吗？老师
正在回答 回答被采纳积分+1
同学你好，解答如下：
1、进入新公司第一件并不是写代码，而是捋顺项目。要把项目的目录结构、组件与页面的对应关系等内容捋清楚。可以根据路由，先看和首页相关的组件有哪些；再根据跳转关系，看其他页面的组件。
页面、组件对应关系看清楚后，再根据路由，去看某一个页面的具体代码。
2、可以先看几个页面的代码，体会一下其他人是怎么写代码的。看代码的过程中，你会获取到一些关键的信息，比如项目中使用了什么插件发送了ajax请求，以及怎么使用的；哪些功能是被封装过的，这些功能，能实现什么样的效果，参数是什么。
3、看不懂的内容，可以问同事，因为他们对项目会非常熟悉，也能给你很多关键的信息。不会写的内容，可以搜索，从网上的资料中获取灵感。
4、获取数据，可以使用axios，咱们的项目中，有大量使用axios发送请求的代码，可以参考一下：
也可以看看项目中，使用了什么，然后按照项目中的代码，改写即可。
5、刚入职新公司，看不懂项目很正常，但是要用心的去琢磨、去研究、去问（虚心好学）。关于具体的代码，老师无法提供具体的帮助，只能靠同学自己尝试去写、去解决。
实际开发中，最重要的就是“面对问题、解决问题”的能力，这需要一点点锻炼，不能急。不要轻易否定自己，只要你去思考、去琢磨，总能找到思路和灵感的。
祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星