You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

872 lines
25 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<el-dialog
:visible.sync="dialogVisible"
:show-close="false"
:destroy-on-close="true"
:close-on-click-modal="false"
append-to-body
custom-class="dialog-boxed"
width="80%"
>
<div class="dialog-slot">
<div class="closeClick">
<div class="newplan">
<div class="line"></div>
<div class="span">新增计划</div>
</div>
<img src="@/assets/images/close.png" alt="" @click="Close" />
</div>
<div class="content">
<div class="module">
<div class="select" :class="nextStep ? '' : 'nextStepSelect'">
<span class="span-one"></span>
<span>选择企业</span>
</div>
<div class="issue" :class="nextStep ? 'nextStepIssue' : ''">
<span class="span-one"></span>
<span>发布计划</span>
</div>
</div>
<div v-if="!nextStep">
<div class="filtrate">
<div class="select-input">
<div class="select-span">行政区划:</div>
<el-cascader
v-model="form.compartment"
placeholder="请选择"
:options="optionstwo"
:props="props"
@change="handleChange">
</el-cascader>
</div>
<!-- <div class="select-input">
<div class="select-span">企业类型:</div>
<el-select v-model="form.frimType" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div> -->
<div class="select-input">
<div class="select-span">经济类型:</div>
<el-select v-model="form.economicsType" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="select-input">
<div class="select-span">行业类型:</div>
<el-select v-model="form.industryType" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<!-- <div class="select-input">
<div class="select-span">行业类型:</div>
<el-radio-group v-model="form.isPoint">
<el-radio label="1">是</el-radio>
<el-radio label="0">否</el-radio>
</el-radio-group>
</div> -->
<div class="select-input">
<div class="select-span">是否重点:</div>
<el-select v-model="form.majorHazardLevel" placeholder="请选择">
<el-option label="是" value="1"></el-option>
<el-option label="否" value="0"></el-option>
</el-select>
</div>
<div class="select-input">
<div class="select-span">重大危险源等级:</div>
<el-select v-model="form.majorHazardLevel" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="select-input">
<div class="select-span">企业分色:</div>
<el-select v-model="form.entprColor" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<!-- <div class="bottom"> -->
<div class="input-input">
<el-input
v-model="form.uscCode"
placeholder="请输入企业名称/统一信用代码"
></el-input>
</div>
<div class="btns">
<div class="select-btn" @click="filtrate">搜索</div>
<div class="select-btn select-btn1">导入</div>
</div>
<!-- </div> -->
</div>
<div class="tables" v-loading="loading">
<el-table
:data="tableData"
style="width: 100%"
:border="false"
ref="multipleTable"
tooltip-effect="light"
@selection-change="handleSelectionChange"
row-key="id"
:row-class-name="tableRowClassName"
>
<el-table-column
type="selection"
reserve-selection
width="55"
header-align="center"
>
</el-table-column>
<el-table-column
prop="entprName"
label="企业名称"
show-overflow-tooltip
header-align="center"
>
</el-table-column>
<!-- <el-table-column
prop="subdistrict"
label="行政区划"
show-overflow-tooltip
width="180"
header-align="center"
>
</el-table-column> -->
<el-table-column
prop="address"
label="企业类型"
show-overflow-tooltip
header-align="center"
>
</el-table-column>
<el-table-column
prop="uscCode"
label="统一社会信用代码"
show-overflow-tooltip
header-align="center"
>
</el-table-column>
<el-table-column prop="isPoint" label="是否重点" header-align="center">
<template slot-scope="scope">
<div
style="font-family: 'Alibaba PuHuiTi'"
:class="scope.row.isPoint == '1' ? 'isStyle' : ''"
>
<span v-if="scope.row.isPoint == '1'">是</span>
<span v-if="scope.row.isPoint == '0'">否</span>
</div>
</template>
</el-table-column>
<!-- <el-table-column prop="" label="选择" header-align="center">
<template slot-scope="scope">
<div class="look" @click="chec(scope.row)">
<el-checkbox v-model="scope.row.is"></el-checkbox>
</div>
</template>
</el-table-column> -->
</el-table>
</div>
<div class="pagination">
<my-pagination
:total="total"
@pagesChange="pagesChange"
></my-pagination>
</div>
</div>
<div v-else class="release-planning">
<div class="inputs centered">
<div class="inputs-span">计划年份:</div>
<!-- <el-select v-model="form2.year" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select> -->
<el-date-picker
v-model="form2.plannedYear"
type="month"
format="yyyy-MM"
:clearable="false"
value-format="yyyy-MM"
placeholder="请选择年份">
</el-date-picker>
<!-- <img class="data_icon" src="@/assets/images/down2.png" alt=""> -->
</div>
<div class="inputs centered">
<div class="inputs-span">计划标题:</div>
<div class="input">
<el-input
v-model="form2.planName"
:maxlength="50"
placeholder="请输入计划标题"
></el-input>
</div>
</div>
<div class="inputs">
<div class="inputs-span">计划内容:</div>
<div class="input">
<el-input
v-model="form2.planContent"
type="textarea"
resize="none"
placeholder="请输入计划内容"
></el-input>
</div>
</div>
<div class="inputs">
<div class="inputs-span">备注:</div>
<div class="input">
<el-input
v-model="form2.remark"
type="textarea"
resize="none"
placeholder="请输入备注"
></el-input>
</div>
</div>
</div>
<div class="next">
<div class="selected">
<span>{{ selected }}</span
>家企业
</div>
<div
class="btn"
:class="nextStep ? 'selectBtn' : ''"
@click="next"
ref="next"
>
{{ nextText }}
</div>
</div>
</div>
</div>
</el-dialog>
</template>
<script>
import myPagination from "@/views/components/myPagination/index.vue";
export default {
components: { myPagination },
data() {
return {
dialogVisible: false,
tableData: [
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
is: 1,
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
is: 1,
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
is: 1,
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
is: 1,
},
{
date: "2016-05-08",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
is: 2,
},
{
date: "2016-05-06",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
is: 2,
},
{
date: "2016-05-07",
name: "王小虎",
is: 2,
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-08",
name: "王小虎",
is: 2,
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-06",
name: "王小虎",
is: 2,
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-07",
name: "王小虎",
is: 2,
address: "上海市普陀区金沙江路 1518 弄",
},
],
options: [],
optionstwo:[],
props:{
value:'institutionName',
label:'institutionName'
},
multipleSelection: [],
selected: 0,
nextStep: false,
nextText: "下一步",
form: {
compartment: "",
frimType: "",
economicsType: "",
isPoint: "",
majorHazardLevel: "",
entprColor: "",
uscCode: "",
},
form2: {
plannedYear: "",
planName: "",
planContent: "",
remark: "",
},
total:0,
pages:{
pageNum:1,
pageSize:10,
},
loading:false,
isamend:false,
amendId:'',
};
},
methods: {
filtrate(){
let obj = {...this.pages,...this.form}
this.getTable(obj);
},
async open(item) {
this.dialogVisible = true;
if(item == 'newlyIncreased') {
this.getTable(this.pages);
} else {
this.amendId = item.id
this.isamend = true;
this.getList(item);
this.getTable(this.pages);
}
},
Close(item) {
this.dialogVisible = false;
this.isamend = false;
this.nextStep = false;
this.nextText = "下一步";
Object.keys(this.form).forEach(key=>this.form[key]='')
Object.keys(this.form2).forEach(key=>this.form2[key]='')
this.pages.pageNum = 1;
this.pages.pageSize = 10;
this.selected = 0;
// this.getTable(this.pages);
if(item == 'newsuccess') {
this.$emit('close')
}
},
// 点击修改进入的请求
async getList(item){
let data = await this.$api.yingji.bPlanManageTwo(item.id)
this.selected = data.data.list.length;
let { plannedYear, planName, planContent, remark } = data.data;
this.form2.plannedYear = plannedYear;
this.form2.planName = planName;
this.form2.planContent = planContent;
this.form2.remark = remark;
let arr = data.data.list
this.multipleSelection = data.data.list;
arr.forEach((list)=>{
this.$nextTick(()=>{
this.$refs.multipleTable.toggleRowSelection(list)
})
})
},
// 查看/切换页码时的网络请求
async getTable(pages){
this.loading = true;
let data = await this.$api.yingji.basicList(pages);
this.total = data.data.total;
if(data.code == 200) {
this.loading = false;
}
this.tableData = data.data.list;
},
// 页码,当前页切换事件
pagesChange(pages) {
this.getTable(pages);
this.pages = pages;
},
// 选中的数据
handleSelectionChange(val) {
this.multipleSelection = val;
this.selected = this.multipleSelection.length;
// console.log(val)
console.log(this.multipleSelection)
},
// 计算当前时间
getData(){
var myDate = new Date;
var year = myDate.getFullYear(); //获取当前年var mon = myDate.getMonth() + 1; //获取当前月
var mon = myDate.getMonth() + 1 < 10 ? '0' + (myDate.getMonth() + 1) : myDate.getMonth() + 1 == 0 ? '00' : myDate.getMonth() + 1;
var date = myDate.getDate() < 10 ? '0' + myDate.getDate() : myDate.getDate(); //获取当前日
var hours = myDate.getHours() < 10 ? '0' + myDate.getHours() : myDate.getHours(); //获取当前小时
var minutes = myDate.getMinutes() < 10 ? '0' + myDate.getMinutes() : myDate.getMinutes(); //获取当前分钟
var seconds = myDate.getSeconds() < 10 ? '0' + myDate.getSeconds() : myDate.getSeconds(); //获取当前秒var now = year + "_" + mon + "_" + date + " "+ hours + ":" + minutes + ":" + seconds;
var now = year + "-" + mon + "-" + date + " "+ hours + ":" + minutes + ":" + seconds;
return now;
},
// 下一步
async next() {
if (this.$refs.next.innerText == "下一步") {
this.nextStep = true;
this.nextText = "发布计划";
} else {
// console.log(this.form2);
console.log(this.multipleSelection);
let arr = [];
let arr2 = [];
let keyCount = 0;
this.multipleSelection.map((item)=>{
arr.push(item.subdistrict);
arr2.push(item.uscCode);
if(item.isPoint == '1') {
keyCount++;
}
})
let district = arr.join(',');
let enterpriseId = arr2.join(',');
let createTime = this.getData();
let planNumb = this.multipleSelection.length
let obj = {...this.form2,district,enterpriseId,createTime,keyCount,planNumb}
let data
if(this.isamend) {
obj = {...obj,id:this.amendId}
data = await this.$api.yingji.bPlanManage('put',obj)
if(data.code == 200){
this.$message({
message: '修改成功',
type: 'success'
});
this.Close('newsuccess');
}
} else {
data = await this.$api.yingji.bPlanManage('post',obj)
if(data.code == 200){
this.$message({
message: '新增成功',
type: 'success'
});
this.Close('newsuccess');
}
}
}
},
// 区划级联选择器选择触发
handleChange(value){
console.log(value)
},
tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 !== 0) {
return "success-row";
}
return "";
},
commentData(item){
if(item instanceof Array) {
item.map((item)=>{
if(item.children instanceof Array && item.children.length == 0){
delete item.children;
} else {
this.commentData(item.children)
}
})
}
this.optionstwo = item
}
},
async mounted(){
let data = await this.$api.yingji.tree(); // 行政区划
let listOne = await this.$api.yingji.dictdata({list:'economic_categories'}); // 经济类型
let listTwo = await this.$api.yingji.dictdata({list:'category'}); // 行业类型
let listThree = await this.$api.yingji.dictdata({list:'major_hazard_level'}); // 重大危险源等级
let listFour = await this.$api.yingji.dictdata({list:'entpr_color'}); // 企业分色
this.commentData(data.data)
}
};
</script>
<style lang="scss" scoped>
.isStyle {
color: #f71052;
}
.dialog-slot {
.closeClick {
position: absolute;
top: 0;
right: 0;
padding: 10px 20px;
width: 100%;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
text-align: center;
background: #f8f9fa;
box-shadow: 0px 1px 0px 0px #dbe0e8;
background-color: #e0eaf8;
img {
width: 18px;
height: 18px;
cursor: pointer;
}
.newplan {
display: flex;
align-items: center;
.line {
margin-right: 10px;
width: 5px;
height: 16px;
background-color: #1e70de;
}
.span {
font-size: 16px;
font-family: "Alibaba PuHuiTi";
font-weight: bold;
color: #1e70de;
}
}
}
.content {
// padding: 15px 10px;
.module {
padding-bottom: 15px;
display: flex;
border-bottom: 1px solid #e8ecf0;
.select,
.issue {
width: 150px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #525966;
span {
font-size: 15px;
font-family: "Alibaba PuHuiTi";
font-weight: 400;
}
.span-one {
margin-right: 10px;
}
}
.select {
background-image: url("../../../assets/images/select2.png");
background-size: 100% 100%;
margin-right: 10px;
}
.issue {
background-image: url("../../../assets/images/issue2.png");
background-size: 100% 100%;
}
.nextStepSelect {
background-image: url("../../../assets/images/select1.png");
span {
color: #2378ec;
}
}
.nextStepIssue {
background-image: url("../../../assets/images/issue1.png");
span {
color: #2378ec;
}
}
}
.filtrate {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding-bottom: 10px;
.select-input {
// margin-right: 10px;
margin-top: 20px;
display: flex;
align-items: center;
.select-span {
font-size: 13px;
font-family: "Alibaba PuHuiTi";
font-weight: 400;
color: #525966;
line-height: 40px;
margin-right: 10px;
}
::v-deep .el-select {
background-color: transparent;
width: 180px;
.el-input__inner {
height: 33px;
}
.el-input .el-input__suffix .el-input__suffix-inner .el-icon-arrow-up {
display: flex;
align-items: center;
justify-content: center;
}
// border-radius: 2px;
.el-input
.el-input__suffix
.el-input__suffix-inner
.el-icon-arrow-up::before {
content: "";
background: url(../../../assets/images/down2.png) center center
no-repeat;
background-size: cover;
position: absolute;
width: 10px;
height: 7px;
// top: 50%;
// left: 50%;
// transform: translate(-50%, -50%);
transform: rotate(180deg);
}
}
::v-deep .el-cascader {
background-color: transparent;
width: 180px;
.el-input__inner {
height: 33px;
}
// border-radius: 2px;
.el-input
.el-input__suffix
.el-input__suffix-inner
.el-icon-arrow-down::before {
content: "";
background: url(../../../assets/images/down2.png) center center
no-repeat;
background-size: cover;
position: absolute;
width: 10px;
height: 7px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
}
// .bottom {
// display: flex;
// justify-content: space-between;
// width: 100%;
//
// }
.input-input {
margin: 20px 40px 0 0;
width: 250px;
::v-deep .el-input {
.el-input__inner {
height: 33px;
}
}
}
.btns {
display: flex;
}
.select-btn {
margin: 20px 0 0 0;
width: 80px;
height: 33px;
background: #2378ec;
border-radius: 2px;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-family: Alibaba PuHuiTi;
font-weight: 500;
color: #ffffff;
cursor: pointer;
}
.select-btn1 {
background: #28b384;
margin-left: 20px;
}
}
.tables {
background-color: #eaf2fd;
::v-deep .el-table {
.success-row {
background-color: rgba(234, 242, 253, 0.25);
}
td {
height: 30px;
text-align: center;
font-size: 15px;
font-family: "Alibaba PuHuiTi";
font-weight: 400;
color: #525966;
}
th {
height: 30px;
background-color: #eaf2fd;
font-size: 16px;
font-family: "Alibaba PuHuiTi";
font-weight: bold;
color: #525966;
.el-checkbox {
display: none;
}
}
.el-table__body-wrapper {
height: 448px !important;
overflow-y: auto;
}
}
::v-deep .el-table::before {
height: 0;
}
}
.pagination {
margin-top: 10px;
}
.release-planning {
padding: 0 10px 0 0;
.inputs {
display: flex;
margin-top: 20px;
.inputs-span {
width: 80px;
text-align: right;
margin-right: 10px;
font-size: 15px;
font-family: "Alibaba PuHuiTi";
font-weight: 400;
color: #525966;
}
::v-deep .el-select {
background-color: transparent;
width: 190px;
.el-input__inner {
height: 33px;
}
// border-radius: 2px;
}
.input {
flex: 1;
::v-deep .el-textarea {
height: 180px;
.el-textarea__inner {
height: 100%;
}
}
}
}
.centered {
align-items: center;
// position: relative;
// .data_icon {
// width: 10px;
// height: 7px;
// position: absolute;
// top: 50%;
// left: 280px;
// z-index: 9;
// color: #c0c4cc;
// font-size: 14px;
// transform: translateY(-50%);
// }
// ::v-deep .el-input__prefix {
// display: none;
// }
}
}
.next {
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
.selected {
display: flex;
align-items: center;
font-size: 15px;
font-family: "Alibaba PuHuiTi";
font-weight: 400;
color: #525966;
margin-right: 15px;
span {
color: #2378ec;
}
}
.btn {
width: 150px;
height: 30px;
border: 1px solid #2378ec;
border-radius: 2px;
background-color: #eff6ff;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-family: "Alibaba PuHuiTi";
font-weight: 400;
color: #2378ec;
cursor: pointer;
}
.selectBtn {
background-color: #2378ec;
color: #ffffff;
}
}
}
}
::v-deep .el-dialog__body {
padding: 30px 15px;
}
</style>