Skip to content

D
dwsproject
Commit c4697eb8 by 赵言乐
Options

前端修改

parent 1059bc2a
Showing with 156 additions and 24 deletions
roke_product_income_expense/static/src/js/index.html
......@@ -82,54 +82,68 @@
</el-option>
</el-select>
<el-select class="margin_sty" v-model="machinery_type_value" clearable placeholder="请选择类型" @change="machinery_type_change">
<el-select class="margin_sty" v-model="machinery_type_value" clearable placeholder="请选择类型"
@change="machinery_type_change">
<el-option v-for="item in machinery_type_options" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-input style="width: 15%;" v-model="customer_value" placeholder="请填写客户名称" @change="select_change"></el-input>
<el-input style="width: 15%;" v-model="customer_value" placeholder="请填写客户名称"
@change="select_change"></el-input>
<el-date-picker class="margin_sty" v-model="datePickerValue" type="daterange" range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="datePickerChange">
<el-date-picker class="margin_sty" v-model="datePickerValue" type="daterange" range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
@change="datePickerChange">
</el-date-picker>
<el-button type="primary" @click="export_click">导出</el-button>
<el-button v-if="edit_state" type="primary" @click="save_modifications">保存修改</el-button>
</div>
<el-table :data="dataList" border height="500" :row-style="{height: '0'}"
<el-table :data="dataList" border height="500" :row-style="{height: '0'}" :key="table_key"
style="width: 100%;border: 1px solid black;border-color: black" :cell-style="tableCellStyle"
:header-cell-style="tableHeaderCellStyle">
<el-table-column label="业务日期" align="center" width="166">
<el-table-column label="业务日期" align="center" width="150">
<template slot-scope="scope">
<div>
<el-date-picker v-if="scope.row.whether_edit" v-model="scope.row.business_date" type="date"
format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期">
</el-date-picker>
<div v-else>
[[ scope.row.business_date ]]
</div>
</template>
</el-table-column>
<el-table-column label="摘要" align="center">
<template slot-scope="scope">
<div style="text-align: left;">
<el-input v-if="scope.row.whether_edit" type="textarea" v-model="scope.row.abstract"
placeholder="请输入"></el-input>
<div style="text-align: left;" v-else>
[[ scope.row.abstract ]]
</div>
</template>
</el-table-column>
<el-table-column label="客户" align="center">
<template slot-scope="scope">
<div style="text-align: left;">
<el-input v-if="scope.row.whether_edit" v-model="scope.row.customer" placeholder="请输入"></el-input>
<div style="text-align: left;" v-else>
[[ scope.row.customer ]]
</div>
</template>
</el-table-column>
<el-table-column label="收入" align="center" width="120">
<el-table-column label="收入" align="center" width="100">
<template slot-scope="scope">
<div style="text-align: right;">
<el-input v-if="scope.row.whether_edit" v-model="scope.row.income" type="number"
placeholder="请输入"></el-input>
<div style="text-align: right;" v-else>
[[ scope.row.income ]]
</div>
</template>
</el-table-column>
<el-table-column label="支出" align="center" width="120">
<el-table-column label="支出" align="center" width="100">
<template slot-scope="scope">
<div style="text-align: right;">
<el-input v-if="scope.row.whether_edit" v-model="scope.row.expenditure" type="number"
placeholder="请输入"></el-input>
<div style="text-align: right;" v-else>
[[ scope.row.expenditure ]]
</div>
</template>
......@@ -143,12 +157,18 @@
</el-table-column>
<el-table-column label="类型" align="center" width="120">
<template slot-scope="scope">
<div>
<el-select v-if="scope.row.whether_edit" v-model="scope.row.machinery_type" clearable
placeholder="请选择类型">
<el-option v-for="item in machinery_type_options" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
<div v-else>
[[ scope.row.machinery_type ]]
</div>
</template>
</el-table-column>
<el-table-column label="创建人" align="center" width="110">
<el-table-column label="创建人" align="center" width="100">
<template slot-scope="scope">
<div>
[[ scope.row.user_name ]]
......@@ -162,8 +182,11 @@
</div>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="80">
<el-table-column label="操作" align="center" width="120">
<template slot-scope="scope">
<!-- <el-button v-if="scope.row.whether_edit" type="primary">保存</el-button> -->
<el-button v-if="!scope.row.whether_edit" type="primary" icon="el-icon-edit" circle
@click="item_edit(scope)"></el-button>
<el-button type="danger" icon="el-icon-delete" circle @click="deleteItem(scope)"></el-button>
</template>
</el-table-column>
......@@ -187,13 +210,14 @@
paginationTotal: 10,
loading: false,
dataList: [],
table_key: false,
user_name: '',
user_id: null,
createList: [
{
business_date: '',
abstract: '',
customer:'',
customer: '',
income: '',
expenditure: '',
user_name: '',
......@@ -224,7 +248,9 @@
}],
select_value: '',
machinery_type_value: '',
customer_value:''
customer_value: '',
edit_state: false,
edit_list: []
};
},
......@@ -238,6 +264,74 @@
this.getDataList()
},
methods: {
// 保存修改
save_modifications() {
for (let i = 0; i < this.edit_list.length; i++) {
if (!this.edit_list[i].business_date) {
return this.$message({
type: "warning",
message: "请选择业务日期",
});
} else if (this.edit_list[i].machinery_type == '') {
return this.$message({
type: "warning",
message: "请选择类型",
});
} else if ((this.edit_list[i].income == '' && this.edit_list[i].income != 0) || (this.edit_list[i].expenditure == '' && this.edit_list[i].expenditure != 0)) {
return this.$message({
type: "warning",
message: "请填写收入或支出后保存",
});
}
this.edit_list[i].user_id = this.user_id
}
this.loading = true;
axios.request({
url: "/roke/product/product_income_expense/create",
method: "post",
headers: {
"Content-Type": "application/json",
},
data: {
data_list: this.edit_list
}
}).then((res) => {
if (res.data.result.code === 0) {
this.$message({
type: "success",
message: res.data.result.message || "修改成功",
});
this.currentPageNo = 1
this.createList = [
{
business_date: moment().format("YYYY-MM-DD"),
abstract: '',
income: '',
customer: '',
expenditure: '',
user_name: this.user_name,
user_id: this.user_id,
machinery_type: ''
}
]
this.select_value = ''
this.machinery_type_value = ''
this.customer_value = ''
this.datePickerValue = ''
this.edit_list = []
this.edit_state = false
this.getDataList()
} else {
this.$message({
type: "error",
message: res.data.result.message || "修改失败",
});
}
this.loading = false;
});
},
machinery_type_change(e) {
this.getDataList()
},
......@@ -255,8 +349,22 @@
},
// 分页请求数据
handleCurrentChangee(val) {
this.currentPageNo = val;
this.getDataList()
if (this.edit_list.length > 0) {
this.$confirm('有编辑的内容未保存, 是否保存?', '提示', {
confirmButtonText: '确认保存',
cancelButtonText: '取消保存',
type: 'warning'
}).then(() => {
this.save_modifications()
}).catch(() => {
this.edit_list = []
this.currentPageNo = val;
this.getDataList()
});
} else {
this.currentPageNo = val;
this.getDataList()
}
},
// 获取列表数据
getDataList() {
......@@ -271,7 +379,7 @@
end_date: this.datePickerValue[1],
type_str: this.select_value,
machinery_type: this.machinery_type_value,
customer:this.customer_value
customer: this.customer_value
}
axios.request({
url: "/roke/product/product_income_expense/get",
......@@ -283,6 +391,9 @@
}).then((res) => {
if (res.data.result.code === 0) {
this.paginationTotal = res.data.result.count
res.data.result.data.forEach(item => {
item.whether_edit = false
});
this.dataList = res.data.result.data
} else {
this.$message({
......@@ -299,6 +410,13 @@
});
})
},
item_edit(scope) {
console.log(scope);
this.edit_list.push(scope.row)
this.edit_state = true
scope.row.whether_edit = true
this.table_key = !this.table_key
},
// 删除
deleteItem(item, index) {
if (item.row.id) {
......@@ -330,6 +448,13 @@
} else {
this.dataList.splice(item.$index, 1)
}
if (this.edit_list.length > 0) {
this.edit_list.forEach((res_itm, res_idx) => {
if (res_itm.id == item.row.id) {
this.edit_list.splice(res_idx, 1)
}
})
}
},
// 导出
export_click() {
......@@ -405,7 +530,7 @@
business_date: moment().format("YYYY-MM-DD"),
abstract: '',
income: '',
customer:'',
customer: '',
expenditure: '',
user_name: this.user_name,
user_id: this.user_id,
......@@ -471,7 +596,7 @@
}
body {
padding: 15px 35px 30px 35px;
padding: 15px 25px 25px 25px;
}
.el-table .el-table__cell {
......@@ -481,9 +606,15 @@
.el-date-editor.el-input {
width: 140px;
}
.margin_sty{
.margin_sty {
margin: 0 10px;
}
.el-textarea__inner {
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
"Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
</style>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment