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.
suzhouyingjiPC/src/views/components/dialog/index.vue

1277 lines
40 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>
<div>
<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="85%"
>
<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'" @click="selectFirm">
<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.subdistrict"
placeholder="请选择"
:options="listOne"
:props="props"
:disabled="disabled"
@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.ecoTypeLarge" placeholder="请选择">
<el-option
v-for="item in dict.type.economic_categories"
: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.indusTypeClass" placeholder="请选择">
<el-option
v-for="item in dict.type.category"
: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.isPoint" placeholder="请选择">
<el-option
v-for="item in dict.type.is_point"
: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.majorHazardLevel" placeholder="请选择">
<el-option
v-for="item in dict.type.major_hazard_level"
: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 dict.type.entpr_color"
: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 reset" @click="reset">重置</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="uscCode"
:row-class-name="tableRowClassName"
>
<el-table-column
type="selection"
reserve-selection
:selectable="checkSelectable"
width="45"
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="150"
header-align="center"
>
<template slot-scope="scope">
<span>{{ componendDistrict(scope.row.subdistrict)}}</span>
</template>
</el-table-column>
<el-table-column
prop="indusTypeClass"
label="行业类型"
show-overflow-tooltip
header-align="center"
>
<template slot-scope="scope">
<dict-tag
:options="dict.type.category"
:value="scope.row.indusTypeClass"
>
</dict-tag>
</template>
</el-table-column>
<el-table-column
prop="ecoTypeLarge"
label="经济类型"
show-overflow-tooltip
header-align="center"
>
<template slot-scope="scope">
<dict-tag
:options="dict.type.economic_categories"
:value="scope.row.ecoTypeLarge"
>
</dict-tag>
</template>
</el-table-column>
<el-table-column
prop="majorHazardLevel"
label="重大危险源等级"
show-overflow-tooltip
header-align="center"
>
<template slot-scope="scope">
<dict-tag
:options="dict.type.major_hazard_level"
:value="scope.row.majorHazardLevel"
>
</dict-tag>
</template>
</el-table-column>
<el-table-column
prop="entprColor"
label="企业分色"
show-overflow-tooltip
header-align="center"
>
<template slot-scope="scope">
<dict-tag
:options="dict.type.entpr_color"
:value="scope.row.entprColor || '/'"
>
</dict-tag>
</template>
</el-table-column>
<el-table-column
prop="uscCode"
label="统一社会信用代码"
show-overflow-tooltip
width="150"
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 == '2'">否</span>
</div>
</template>
</el-table-column>
<el-table-column label="操作" header-align="center">
<template slot-scope="scope">
<div class="tabs-btns">
<div class="look" @click="look(scope.row)">
<img src="@/assets/images/lookInfo.png" alt="" />
<span>查看详情</span>
</div>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="pagination">
<my-pagination :total="total" @pagesChange="pagesChange" ref="mypagination">
<!-- <div>重点企业数:
<span :class=" count == unCount ? 'selectedNumber' : 'unselectedNumber'">{{ unCount }}</span>/
<span class="sum">{{ count }}</span>
</div> -->
</my-pagination>
</div>
</div>
<div v-else class="release-planning">
<el-form ref="form" :model="form2" label-width="100px" class="form-inline" :rules="rules">
<el-form-item label="计划年月:" prop="plannedYear">
<el-date-picker
v-model="form2.plannedYear"
type="month"
format="yyyy-MM"
:clearable="false"
value-format="yyyy-MM"
placeholder="请选择年月"
>
</el-date-picker>
</el-form-item>
<el-form-item label="计划标题:" prop="planName">
<el-input
v-model="form2.planName"
:maxlength="64"
show-word-limit
placeholder="请输入计划标题"
></el-input>
</el-form-item>
<el-form-item label="计划内容:" prop="planContent" class="form-textarea">
<el-input
v-model="form2.planContent"
type="textarea"
resize="none"
:maxlength="2000"
show-word-limit
placeholder="请输入计划内容"
></el-input>
</el-form-item>
<el-form-item label="备注:" class="form-textarea">
<el-input
v-model="form2.remark"
type="textarea"
resize="none"
:maxlength="2000"
show-word-limit
placeholder="请输入备注"
></el-input>
</el-form-item>
</el-form>
</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>
<firm-dialog ref="firmDialog"></firm-dialog>
</div>
</template>
<script>
import myPagination from "@/views/components/myPagination/index.vue";
import firmDialog from "@/views/components/firmDialog/index.vue";
import { Loading } from "element-ui";
import { mapState } from "vuex";
export default {
dicts:['category','economic_categories','is_point','entpr_color','major_hazard_level'],
components: { myPagination,firmDialog },
data() {
return {
dialogVisible: false,
tableData: [],
listOne: [],
myDistrict:[],
// listTwo: [],
// listThree: [],
// listFour: [],
// listFive: [],
options:[],
// optionstwo:[],
props: {
value: "county",
label: "institutionName",
checkStrictly: true
},
multipleSelection: [],
selected: 0,
nextStep: false,
nextText: "下一步",
workingArea:'',
subdistrict:'',
form: {
subdistrict: [],
ecoTypeLarge: "",
indusTypeClass: "",
isPoint: "",
majorHazardLevel: "",
entprColor: "",
uscCode: "",
},
form2: {
plannedYear: "",
planName: "",
planContent: "",
remark: "",
},
rules: {
plannedYear: [
{ required: true, message: '请选择年月', trigger: 'blur' },
],
planName: [
{ required: true, message: '请输入计划标题', trigger: 'blur' }
],
planContent: [
{ required: true, message: '请输入计划内容', trigger: 'blur' }
]
},
total: 0,
pages: {
pageNum: 1,
pageSize: 10,
},
loading: false,
isamend: false,
amendId: "",
count: 0,
// unCount: 0,
// unselected: 0,
selectList: [],
disabled:false,
county:false,
district:[]
};
},
computed: {
...mapState({
dept: (state) => state.user.dept,
// district: (state) => state.user.district,
// mydict: (state) => state.user.mydict,
}),
},
// watch:{
// tableData:{
// handler(newData,oldData){
// newData.map((item)=>{
// if(item.isPoint == 1) {
// this.$nextTick(() => {
// this.$refs.multipleTable.toggleRowSelection(item,false);
// });
// }
// })
// },
// deep:true,
// }
// },
methods: {
// 返回上一步
selectFirm(){
if(this.$refs.next.innerText == "发布计划"){
this.nextStep = false;
this.filtrate();
this.nextText = "下一步";
this.multipleSelection.map((item)=>{
this.$nextTick(() => {
this.$refs.multipleTable.toggleRowSelection(item);
});
})
}
},
// 匹配行政区划
componendDistrict(district){
let name
this.district.map((item)=>{
if(item.subdistrict == district) {
name = item.institutionName
} else {
item.children.map((itemTwo)=>{
if(itemTwo.subdistrict == district) {
name = item.institutionName + '-' + itemTwo.institutionName
}
})
}
})
// console.log(name)
return name
},
// 匹配重大危险源等级
filterTable(a, b) {
let arr = [];
if (!b) return;
if (a == this.optionstwo.major_hazard_level) {
arr = a.filter((value) => {
return "0" + value.dictValue == b;
});
}
arr = a.filter((value) => {
return value.dictValue == b;
});
return arr[0].dictLabel;
},
// 搜索
filtrate() {
// if (this.form.subdistrict) {
// this.subdistrict = this.trimTrailingZeros(this.form.subdistrict);
// }
this.pages.pageNum = 1;
this.pages.pageSize = 10;
this.$nextTick(()=>{
this.$refs.mypagination.defaultPages();
})
let obj
// 如果是苏州市或者是某个区
if(!this.disabled) {
// console.log('123')
if(Array.isArray(this.form.subdistrict)){
if(this.form.subdistrict.length == 2) {
this.subdistrict = this.form.subdistrict[1].slice(0, 10);
obj = { ...this.pages, ...this.form,subdistrict:this.subdistrict };
} else if(this.form.subdistrict.length == 1) {
this.subdistrict = this.form.subdistrict[0].slice(0, 7);
obj = { ...this.pages, ...this.form,subdistrict:this.subdistrict };
} else {
obj = {...this.pages,...this.form}
}
} else {
if(this.county){
let subdistrict = this.form.subdistrict.slice(0, 7);
obj = { ...this.pages, ...this.form,subdistrict };
} else {
let subdistrict = this.form.subdistrict.slice(0, 7);
obj = { ...this.pages, ...this.form,subdistrict };
}
}
} else {
// 不是苏州市是乡镇
// if(this.dept.ancestors.split(',').length == 2) {
// this.subdistrict = this.form.subdistrict.slice(1, 8);
// obj = { ...this.pages, ...this.form,subdistrict:this.subdistrict };
// } else if(this.dept.ancestors.split(',').length == 3){
this.subdistrict = this.form.subdistrict.slice(0, 10);
obj = { ...this.pages, ...this.form,subdistrict:this.subdistrict };
// }
}
// console.log(isAncestors)
// obj = { ...this.pages, ...this.form,subdistrict:this.subdistrict };
this.getTable(obj);
},
// 处理搜索行政区划
trimTrailingZeros(str) {
for (let i = str.length - 1; i >= 0; i--) {
if (str.charAt(i) !== '0') {
return str.slice(0, i + 1);
}
}
// 如果字符串全是零,直接返回原字符串
return str;
},
// 重置
reset() {
this.form= {
subdistrict: this.workingArea,
frimType: "",
indusTypeClass: "",
isPoint: "",
majorHazardLevel: "",
entprColor: "",
uscCode: "",
},
this.pages.pageNum = 1;
this.pages.pageSize = 10;
this.$refs.mypagination.defaultPages();
// let obj = {...this.pages,...this.form}
if(this.dept.ancestors.split(',').length == 2){
this.subdistrict = this.workingArea.slice(0, 7);
} else if(this.dept.ancestors.split(',').length == 3){
this.subdistrict = this.form.subdistrict.slice(0, 10);
}
this.getTable({...this.pages,...this.form,subdistrict:this.subdistrict});
},
// 当前行的checkBox是否可以勾选
checkSelectable(row) {
row["unselected"] = true;
this.selectList.map((item) => {
if (item.enterpriseId == row.uscCode || row["multipleTable"] == true) {
row["unselected"] = false;
}
});
// console.log(row)
return row.unselected;
},
// 选中企业的获取
async bPlanEnterprise() {
let count = 0;
let data = await this.$api.yingji.bPlanEnterpriseList();
this.selectList = data.data;
data.data.map((item) => {
item["uscCode"] = item.enterpriseId;
this.$nextTick(() => {
this.$refs.multipleTable.toggleRowSelection(item, false);
});
if (item.isPoint == 1 && this.dept.ancestors.split(',').length == 3) {
if(item.district == this.form.subdistrict){
count += 1;
}
}
});
// console.log(count,'count')
this.unselected = count;
},
// 乡镇获取企业重点总数
async gettownNumbers(){
let data = await this.$api.yingji.getBydistrict({district:this.form.subdistrict})
this.count = data.data;
},
// 打开
async open(item,dept) {
this.dialogVisible = true;
// this.dept = dept
let data = await this.$api.yingji.tree();
this.district = data.data
this.commentData(this.district,dept);
this.bPlanEnterprise();
this.filtrate()
if (item == "newlyIncreased") {
// 判断如若是镇级即将所有重点企业全选
if(dept.ancestors.split(',').length == 3){
this.gettownNumbers();
}
// this.getTable(this.pages);
} else {
this.amendId = item.id;
this.isamend = true;
this.getList(item);
// this.getTable(this.pages);
}
},
// 关闭
Close(item) {
this.pages.pageNum = 1;
this.pages.pageSize = 10;
// this.$refs.mypagination.defaultPages();
this.dialogVisible = false;
this.tableData = [];
this.multipleSelection = [];
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.unCount = 0;
this.selected = 0;
// this.unselected = 0;
// this.count = 0;
if (item == "newsuccess") {
this.$emit("close");
}
},
// 查看企业详情
look(row){
this.$refs.firmDialog.open(row)
},
// 点击修改进入的请求
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);
// console.log(data.data.count, '重点企业总数');
// console.log(this.unCount,'this.unCount')
// this.count = data.data.count;
// data.data.count == this.unselected
// ? (this.unCount = data.data.count)
// : this.unselected == 0
// ? (this.unCount = 0)
// : (this.unCount = data.data.count - this.unselected);
this.total = data.data.total;
// console.log(this.unselected,'this.unselected')
if (data.code == 200) {
this.loading = false;
}
this.tableData = data.data.list;
// console.log(isAncestors,'isAncestors')
if(this.dept.ancestors.split(',').length == 3) {
this.tableData.forEach((item)=>{
if(item.isPoint == '1') {
this.$refs.multipleTable.toggleRowSelection(item);
item["multipleTable"] = true;
}
})
}
},
// 页码,当前页切换事件
pagesChange(pages) {
this.pages = pages;
// console.log(this.form)
if(this.dept.ancestors.split(',').length == 2){
if(Array.isArray(this.form.subdistrict)) {
if(this.form.subdistrict.length == 2) {
this.subdistrict = this.form.subdistrict[1].slice(0, 10);
}
} else {
this.subdistrict = this.form.subdistrict.slice(0, 7);
}
} else if(this.dept.ancestors.split(',').length == 3){
this.subdistrict = this.form.subdistrict.slice(0, 10);
}
// console.log(this.subdistrict,'this.subdistrict')
// console.log(this.form,'this.form')
this.getTable({...pages,...this.form,subdistrict:this.subdistrict});
},
// 选中的数据
handleSelectionChange(val) {
this.multipleSelection = val;
this.selected = this.multipleSelection.length;
},
// 计算当前时间
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() {
let arr = [];
let arr2 = [];
let arr3 = [];
let keyCount = 0;
this.multipleSelection.map((item) => {
arr.push(item.subdistrict);
arr2.push(item.uscCode);
arr3.push(item.entprName);
if (item.isPoint == "1") {
keyCount++;
}
});
if (this.$refs.next.innerText == "下一步") {
if (this.multipleSelection.length == 0) {
this.$message.error("请至少选择一家企业");
return;
}
// if (this.dept.ancestors.split(',').length == 3) {
// // console.log(this.unselected,'this.unselected')
// // console.log(keyCount,'keyCount')
// if (this.count == this.unselected + keyCount) {
// this.nextStep = true;
// this.nextText = "发布计划";
// } else {
// this.$message.error("请将重点企业全选");
// }
// }
else {
this.nextStep = true;
this.nextText = "发布计划";
}
} else {
this.$refs.form.validate(async (valid) => {
if (valid) {
let downloadLoadingInstance = Loading.service({
text: this.isamend ? "正在修改计划,请稍后" : "正在发布计划,请稍后",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)",
});
// console.log(this.form2);
// console.log(this.multipleSelection);
let district = arr.join(",");
let enterpriseId = arr2.join(",");
let enterpriseName = arr3.join(",");
let createTime = this.getData();
let planNumb = this.multipleSelection.length;
let obj = {
...this.form2,
district,
enterpriseId,
enterpriseName,
createTime,
planNumb,
};
let data;
if (this.isamend) {
obj = { ...obj, id: this.amendId };
data = await this.$api.yingji.bPlanEnterprise("put", obj);
if (data.code == 200) {
downloadLoadingInstance.close();
this.$message({
message: "修改成功",
type: "success",
});
this.Close("newsuccess");
}
} else {
data = await this.$api.yingji.bPlanEnterprise("post", obj);
if (data.code == 200) {
downloadLoadingInstance.close();
this.$message({
message: "新增成功",
type: "success",
});
this.Close("newsuccess");
} else {
downloadLoadingInstance.close();
}
}
} else {
// console.log('error submit!!');
return false;
}
});
}
},
// 区划级联选择器选择触发
handleChange(value) {
},
tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 !== 0) {
return "success-row";
}
return "";
},
commentData(item,dept) {
// item.map((item)=>{
// if(item.children instanceof Array && item.children.length == 0){
// item.county = item.subdistrict
// delete item.children;
// } else {
// // this.props.value = 'subdistrict'
// this.commentData(item.children,dept)
// }
// })
item.map((item)=>{
item.children.map((itemTwo)=>{
if(itemTwo.children.length == 0){
delete itemTwo.children;
}
itemTwo.county = itemTwo.subdistrict
})
})
// this.myDistrict = item;
this.listOne = item
if(dept.ancestors.split(',').length == 2) {
this.listOne = this.listOne.filter((item)=>{
return item.institutionName == dept.deptName
})
this.listOne.map((item)=>{
if(item.institutionName == dept.deptName) {
// console.log(item.county)
this.form.subdistrict = item.county
this.workingArea = item.county
this.county = true;
// delete item.children
}
})
// this.disabled = true;
} else if(dept.ancestors.split(',').length == 3) {
this.listOne.map((item)=>{
item.children.map((itemTwo)=>{
if(itemTwo.institutionName == dept.deptName) {
this.form.subdistrict = itemTwo.subdistrict
this.workingArea = itemTwo.county
this.county = false;
}
})
})
this.disabled = true;
}
},
},
async mounted() {
// let listTwo = await this.$api.yingji.dictdata({
// list: "economic_categories",
// }); // 经济类型大类
// let listThree = await this.$api.yingji.dictdata({ list: "category" }); // 行业类型
// let listFour = await this.$api.yingji.dictdata({
// list: "major_hazard_level",
// }); // 重大危险源等级
// let listFive = await this.$api.yingji.dictdata({ list: "entpr_color" }); // 企业分色
// let dictdata = await this.$api.yingji.dictdata({ list: "economic_categories,category,major_hazard_level,entpr_color"})
// this.optionstwo = this.mydict;
// this.listTwo = listTwo.data.economic_categories;
// this.listThree = listThree.data.category;
// this.listFour = listFour.data.major_hazard_level;
// this.listFive = listFive.data.entpr_color;
},
};
</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;
align-items: center;
}
.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;
}
.reset {
background: #fdab5b;
margin-left: 20px;
}
// .select-btn1 {
// background: #28b384;
// margin-left: 20px;
// }
}
.tables {
// background-color: #eaf2fd;
.tabs-btns {
display: flex;
align-items: center;
justify-content: center;
.look {
display: flex;
align-items: center;
cursor: pointer;
img {
width: 20px;
margin-right: 5px;
}
span {
font-size: 15px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #045ffd;
}
}
}
::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;
.unselectedNumber {
color: #f71052;
}
.selectedNumber {
color: #48e1bb;
}
.sum {
color: #48e1bb;
}
}
.release-planning {
padding: 10px 10px 0 0;
.form-inline {
::v-deep .el-select {
background-color: transparent;
width: 190px;
.el-input__inner {
height: 33px;
font-size: 15px;
font-family: 'Alibaba PuHuiTi';
font-weight: 400;
color: #525966;
}
// border-radius: 2px;
}
::v-deep .el-input {
.el-input__inner {
font-size: 15px;
font-family: 'Alibaba PuHuiTi';
font-weight: 400;
color: #525966;
}
}
.form-textarea {
::v-deep .el-textarea {
height: 180px;
.el-textarea__inner {
height: 100%;
font-size: 15px;
font-family: 'Alibaba PuHuiTi';
font-weight: 400;
color: #525966;
}
}
}
}
.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>