Files
JY1.0/src/views/MarketingCenter/CreateProject/index.vue
liushuai b3138148f6 更新
2020-04-27 18:59:18 +08:00

558 lines
22 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<div>
<el-card style="padding: 3px 0px 3px 0px;width: 1238px">
<el-select v-model="entryNameValue" clearable filterable placeholder="项目名称" size="small" style="width:180px;margin: 0px 0px" @change="PageSize = 10;PageCurrent = 1;fetchTableData1()">
<el-option
v-for="item in entryName"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
<el-date-picker
v-model="date"
size="small"
style="width: 240px;margin-left: 10px"
clearable
type="daterange"
range-separator=""
start-placeholder="开始日期"
end-placeholder="结束日期"/>
<!-- <el-input v-model="contractNumber" clearable size="small" style="width:200px;margin: 3px 10px" placeholder="请输入合同编号"/>-->
<!-- <span style="margin-left: 10px">机床型号</span>-->
<!-- <el-input v-model="machine" clearable size="small" style="width:200px" placeholder="请输入机床型号"/>-->
<!-- </div>-->
<!-- <div style="margin-top: 10px">-->
<!-- <span style="margin-left: 0px">开始日期</span>-->
<!-- <el-date-picker-->
<!-- v-model="startTime"-->
<!-- style="width: 200px;"-->
<!-- value-format="yyyy-MM-dd"-->
<!-- size="small"-->
<!-- type="date"-->
<!-- placeholder="请选择开始日期"/>-->
<!-- <span style="margin-left: 10px">结束日期</span>-->
<!-- <el-date-picker-->
<!-- v-model="endTime"-->
<!-- style="width: 200px;"-->
<!-- value-format="yyyy-MM-dd"-->
<!-- size="small"-->
<!-- type="date"-->
<!-- placeholder="请选择结束日期"/>-->
<!--<el-button type="primary" icon="el-icon-search" size="small" style="margin-left: 10px;background: #ecf5ff;border-color: #2d72d5;color: #2d72d5;" @click="PageSize = 10;PageCurrent = 1;fetchTableData1()">查询</el-button>-->
<el-button type="primary" icon="el-icon-search" size="small" style="margin-left: 20px" plain @click="PageSize = 10;PageCurrent = 1;fetchTableData1()">查询</el-button>
<el-tooltip :open-delay="1200" effect="dark" content="新增项目" placement="top">
<el-button class="button111" icon="el-icon-circle-plus-outline" size="small" style="margin-left: 15px" @click="ADD()">自家项目</el-button>
<!--<el-button type="primary" icon="el-icon-circle-plus-outline" size="small" style="margin-left: 10px;background: #fdf6ec;border-color: #ff9759;color: #ff9759;" @click="ADD()">新增</el-button>-->
</el-tooltip>
<el-button icon="el-icon-bottom" type="success" plain size="small" style="margin-left: 15px" @click="exportExcel()">导出</el-button>
</el-card>
<el-row>
<el-col style="width: 783px">
<el-card>
<el-table v-loading="listLoading" :data="tableData1" :row-key="getRowKeys" :expand-row-keys="expands" style="width: 100%" height="700" border stripe size="mini" @row-click="selectMachine">
<el-table-column align="center" label="合同编号" prop="合同编号" width="120px">
<template slot-scope="scope">
<template>
{{ scope.row.合同编号 }}
</template>
</template>
</el-table-column>
<el-table-column align="center" label="项目名称" prop="项目名称" width="130px" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.项目名称 }}
</template>
</el-table-column>
<el-table-column align="center" label="项目创建日期" prop="合同签订日期" width="120px">
<template slot-scope="scope">
{{ scope.row.合同签订日期.substring(0,10) }}
</template>
</el-table-column>
<el-table-column align="center" label="合同信息备注" width="150px">
<template slot-scope="scope">
{{ scope.row.合同信息备注 }}
</template>
</el-table-column>
<el-table-column align="center" label="创建人" width="90px">
<template slot-scope="scope">
{{ scope.row.自家项目创建人 }}
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="130px">
<template slot-scope="scope">
<el-button style="margin-left: 5px" size="mini" type="text" icon="el-icon-circle-plus-outline" @click.stop="addMachine(scope.row);flag = 1">机床</el-button>
<el-button style="margin-left: 5px" size="mini" type="text" icon="el-icon-edit" @click.stop="handleEdit(scope.row)"/>
<el-button style="margin-left: 5px;margin-right: 5px" size="mini" type="text" icon="el-icon-delete" @click.stop="handleDelete(scope.row)"/>
</template>
</el-table-column>
</el-table>
<!-- <div class="block" style="margin-top: 10px;">-->
<!-- <el-pagination-->
<!-- :current-page="PageCurrent"-->
<!-- :page-sizes="[10, 20, 30, 40]"-->
<!-- :page-size="PageSize"-->
<!-- :total="total"-->
<!-- layout="total, sizes, prev, pager, next, jumper"-->
<!-- @size-change="handleSizeChange"-->
<!-- @current-change="handleCurrentChange"/>-->
<!-- </div>-->
</el-card>
</el-col>
<el-col style="width: 455px">
<el-card>
<!--<el-table :data="tableData2" class="subTableHeader" border stripe style="width: 100%; text-align: center" size="mini">-->
<el-table :data="tableData2" border stripe style="width: 433px; text-align: center" size="mini">
<el-table-column label="机床图号" align="center" width="120">
<template slot-scope="scope">
{{ scope.row.机床图号 }}
</template>
</el-table-column>
<el-table-column label="机床名称" align="center" width="150">
<template slot-scope="scope">
{{ scope.row.机床名称 }}
</template>
</el-table-column>
<el-table-column label="机床数量" align="center" width="80">
<template slot-scope="scope">
{{ scope.row.机床数量 }}
</template>
</el-table-column>
<el-table-column label="操作" width="80" align="center">
<template slot-scope="scope">
<el-button style="margin-left: 5px" size="mini" type="text" icon="el-icon-edit" @click="editMachine(scope.row);flag = 2"/>
<el-button style="margin-left: 5px" size="mini" type="text" icon="el-icon-delete" @click="deleteMachine(scope.row)"/>
</template>
</el-table-column>
</el-table>
</el-card>
</el-col>
</el-row>
<!--新增合同信息对话框-->
<el-dialog v-el-drag-dialog :title="title" :visible.sync="dialogFormVisible1" center style="min-height: 300px" width="450px">
<el-form ref="form" :model="form" :rules="rules" label-position="right" label-width="140px" class="demo-ruleForm">
<el-row>
<el-col :span="24">
<el-form-item label="项目名称" prop="EntryName">
<el-input v-model="form.EntryName" size="small" placeholder="请输入项目名称" style="width:200px"/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="项目创建日期" prop="contractSigningDate">
<el-date-picker
v-model="form.contractSigningDate"
style="width: 200px"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
size="small"
type="date"
placeholder="请选择项目下达日期"/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="备注" prop="remark">
<el-input
v-model="form.remark"
style="width: 200px"
type="textarea"
autosize
placeholder="请输入项目介绍"/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="callOff('form')">取消</el-button>
<el-button :disabled="ADD_disable" type="primary" @click="submit('form')"> </el-button>
</div>
</el-dialog>
<el-dialog v-el-drag-dialog :title="title1" :visible.sync="dialogFormVisible2" center style="min-height: 300px" width="450px">
<el-form ref="form1" :model="form1" :rules="rules1" label-width="140px">
<el-form-item v-show="flag != 2" label="项目名称" prop="项目名称">
<el-input v-model="form1.项目名称" size="small" style="width:200px"/>
</el-form-item>
<el-form-item label="设备型号" prop="设备型号">
<el-input v-model="form1.设备型号" size="small" placeholder="请输入设备型号" style="width:200px"/>
</el-form-item>
<el-form-item label="设备名称" prop="设备名称">
<el-input v-model="form1.设备名称" size="small" placeholder="请输入设备名称" style="width:200px"/>
</el-form-item>
<el-form-item label="机床数量" prop="机床数量">
<el-input-number :min="1" v-model="form1.机床数量" controls-position="right" style="width:200px" size="small"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="callOff2('form1')">取消</el-button>
<el-button :disabled="addMachine_disable" type="primary" @click="submitMachine('form1')"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import elInput from 'element-ui/packages/input'
import { getNowTime } from '@/utils/tool'
import { initProject, searchTable1, selectMachine, addList, editchar, delList, submitMachine, editMachine, delMachine } from '@/api/MarketingCenter/CreateProject'
import { mapGetters } from 'vuex'
export default {
components: {
elInput
},
data() {
return {
ADD_disable: false,
addMachine_disable: false,
contractNumber_check: '',
contractNumber: '', // 合同编号
entryName: [],
entryNameValue: '',
machine: '',
startTime: '',
endTime: '',
date: null,
time_check: 0,
PageCurrent: 1,
PageSize: 10,
total: null,
listLoading: false,
entryNameValue_check: 0,
startTime_check: 0,
endTime_check: 0,
machine_check: 0,
a: 1,
b: 1,
c: 1,
tableData1: [],
expands: [],
tableData2: [],
projectNum: '',
hetongID: '',
form: {
EntryName: '', // 项目名称
contractSigningDate: '',
remark: ''
},
dialogFormVisible1: false,
title: '',
rules: { // 表单验证规则
EntryName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
contractSigningDate: [{ required: true, message: '请选择项目下达日期', trigger: 'change' }]
},
dialogFormVisible2: false,
title1: '',
form1: {
项目名称: '',
设备型号: '',
设备名称: '',
机床数量: 1
},
rules1: { // 表单验证规则
设备型号: [{ required: true, message: '请输入设备型号', trigger: 'blur' }],
设备名称: [{ required: true, message: '请输入设备名称', trigger: 'blur' }]
},
temp: '',
flag: ''
}
},
computed: {
...mapGetters([
'id'
])
},
created() {
this.init()
// this.fetchTableData1()
},
methods: {
// EXCEL 导出
// 姜福壮
exportExcel() {
if (this.entryNameValue === '' || this.entryNameValue === null) { this.entryNameValue_check = 0 } else { this.entryNameValue_check = 1 }
if (this.date !== null) {
this.time_check = 1
this.startTime = this.datetoYYMMDD(this.date[0])
this.endTime = this.datetoYYMMDD(this.date[1])
} else {
this.time_check = 0
this.startTime = ''
this.endTime = ''
}
var param = []
param[0] = ['项目流水号_check', this.entryNameValue_check]
param[1] = ['项目流水号', this.entryNameValue]
param[2] = ['日期_check', this.time_check]
param[3] = ['开始日期', this.startTime]
param[4] = ['结束日期', this.endTime]
var Data = this.CreateData('2001', '报表_自家项目报表_查询', param)
this.exportExcel_NPOI(Data)
},
init() {
this.getSelect(initProject, ['项目名称', '项目流水号'], 'entryName')
},
handleSizeChange(val) {
this.PageCurrent = 1
this.PageSize = val
this.fetchTableData1()
},
handleCurrentChange(val) {
this.PageCurrent = val
this.fetchTableData1()
},
fetchTableData1() {
this.tableData2 = []
if (this.date !== null) {
this.startTime = this.datetoYYMMDD(this.date[0])
this.endTime = this.datetoYYMMDD(this.date[1])
} else {
this.startTime = ''
this.endTime = ''
}
if (this.contractNumber === '' || this.contractNumber === null) { this.contractNumber_check = 0 } else { this.contractNumber_check = 1 }
if (this.entryNameValue === '' || this.entryNameValue === null) { this.entryNameValue_check = 0 } else { this.entryNameValue_check = 1 }
if (this.startTime === '' || this.startTime === null) { this.startTime_check = 0 } else { this.startTime_check = 1 }
if (this.endTime === '' || this.endTime === null) { this.endTime_check = 0 } else { this.endTime_check = 1 }
if (this.machine === '' || this.machine === null) { this.machine_check = 0 } else { this.machine_check = 1 }
this.listLoading = true
searchTable1(this.PageCurrent, this.PageSize, this.entryNameValue, this.entryNameValue_check, this.startTime_check, this.endTime_check, this.startTime, this.endTime, this.machine_check, this.machine, this.contractNumber_check, this.contractNumber).then(response => {
this.tableData1 = response.data
this.listLoading = false
})
// this.getTable(searchTable1, [this.PageCurrent, this.PageSize, this.entryNameValue, this.entryNameValue_check, this.startTime_check, this.endTime_check, this.startTime, this.endTime, this.machine_check, this.machine, this.contractNumber_check, this.contractNumber], ['tableData1', 'total', 'listLoading'])
},
// 标准时间转年月日
datetoYYMMDD(date) {
var y = date.getFullYear()
var m = date.getMonth() + 1
m = m < 10 ? ('0' + m) : m
var d = date.getDate()
d = d < 10 ? ('0' + d) : d
// var h = date.getHours()
// var minute = date.getMinutes()
// minute = minute < 10 ? ('0' + minute) : minute
// return y + '-' + m + '-' + d + ' ' + h + ':' + minute
return y + '-' + m + '-' + d
},
selectMachine(row) {
this.projectNum = row.项目流水号
if (this.a === 1) {
this.expands.push(row.项目流水号)
this.b = row.项目流水号
this.a = 0
} else {
if (this.b === row.项目流水号) {
this.expands = []
this.a = 1
} else {
this.expands = []
this.expands.push(row.项目流水号)
this.a = 0
this.b = row.项目流水号
}
}
selectMachine(row.项目流水号).then(response => {
this.tableData2 = response.data
})
},
getRowKeys(row) {
return row.项目流水号
},
ADD() {
this.addForm('form')
this.ADD_disable = false
this.dialogFormVisible1 = true
this.form.contractSigningDate = getNowTime()// new Date()
this.temp = 1
this.title = '新增项目'
},
// 提交添加或者修改
submit(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
if (this.temp === 1) {
this.addTableData1()
this.temp = null
} else if (this.temp === 2) {
this.chaEdit()
this.temp = null
}
}
})
},
addTableData1() {
this.ADD_disable = true
addList(this.form.EntryName, this.form.remark, this.form.contractSigningDate, this.$store.state.user.id).then(response => {
this.dialogFormVisible1 = false
if (response.data[0].result === '1') {
this.$message.success('添加成功')
this.title = ''
this.fetchTableData1()
} else {
this.ADD_disable = false
this.$message.error('添加失败')
}
})
},
callOff() {
this.dialogFormVisible1 = false
this.dialogFormVisible2 = false
},
handleEdit(row) {
this.editForm(row, 'form')
this.title = '编辑项目'
this.dialogFormVisible1 = true
this.form.contractSigningDate = row.合同签订日期
this.form.contractNumber = row.合同编号
this.form.EntryName = row.项目名称
this.hetongID = row.项目流水号
this.form.remark = row.合同信息备注
this.temp = 2
},
chaEdit() {
editchar(this.form.EntryName, this.form.remark, this.hetongID, this.form.contractSigningDate).then(response => {
this.dialogFormVisible1 = false
if (response.data[0].result === '1') {
this.$message.success('信息更新成功')
this.fetchTableData1()
} else {
this.$message.error('信息更新失败')
}
})
},
handleDelete(row) {
this.$confirm('删除该项目,将不可恢复,是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
delList(row.项目流水号).then(response => {
if (response.data[0].result === '1') {
this.$message.success('删除成功')
this.fetchTableData1()
} else {
this.$message.error('请先删除机床信息')
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
},
addMachine(row) {
this.projectNum = row.项目流水号
this.addMachine_disable = false
this.dialogFormVisible2 = true
this.title1 = '新增机床'
this.addForm('form1')
this.form1.项目名称 = row.项目名称
},
submitMachine() {
this.addMachine_disable = true
function a() {
selectMachine(this.projectNum).then(response => {
this.tableData2 = response.data
})
this.dialogFormVisible2 = false
}
if (this.flag === 1) {
this.addTable(submitMachine, [this.projectNum, this.form1.设备型号, this.form1.设备名称, this.form1.机床数量], 'form1', a)
this.addMachine_disable = false
} else {
this.editTable(editMachine, [this.c, this.form1.设备型号, this.form1.设备名称, this.form1.机床数量], 'form1', a)
this.addMachine_disable = false
}
},
deleteMachine(row) {
// function a() {
// selectMachine(this.projectNum).then(response => {
// this.tableData2 = response.data
// })
// }
this.$confirm('删除该机床,将不可恢复,是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
delMachine(row.机床流水号).then(response => {
if (response.data[0].result === '1') {
this.$message.success('删除成功')
selectMachine(this.projectNum).then(response => {
this.tableData2 = response.data
})
} else {
this.$message.error('已经投产的机床不能删除')
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
},
editMachine(row) {
this.flag = 2
this.editForm(row, 'form1')
this.dialogFormVisible2 = true
this.title1 = '编辑机床'
this.c = row.机床流水号
this.form1.设备型号 = row.机床图号
this.form1.设备名称 = row.机床名称
},
callOff2() {
this.dialogFormVisible2 = false
}
}
}
</script>
<style scoped>
/*.el-button--success {*/
/* background: #ecf5ff;*/
/* border-color: #2d72d5;*/
/* color: #2d72d5;*/
/*}*/
/*.el-button--primary {*/
/* background: #fdf6ec;*/
/* border-color: #ff9759;*/
/* color: #ff9759;*/
/* }*/
/*.el-button--info {*/
/* background: #f0f9eb;*/
/* border-color: #67c23a;*/
/* color: #67c23a;*/
/*}*/
</style>
<style lang="scss">
.button111{
background:rgb(253,246,236);
border-color: #ff9759;
color: #ff9759;
&:hover{
background: #ff9759;
border-color: #ff9759;
color: white;
}
&:focus{
background: #ff9759;
border-color: #ff9759;
color: white;
}
}
.subTableHeader {
th {
background: #7eaced !important;
color: #FFFFFF;
}
tr.el-table__row td {
background-color: #d8e5f6 !important;
}
tr.el-table__row.el-table__row--striped td {
background: #e9f0f9 !important;
}
}
</style>