GitBucket
Newer
<template>
<div class="water-analysis-page4">
<div class="top">
<el-form
ref="ruleForm"
inline
:model="FormList"
:rules="rules"
:key="isKey"
:disabled="typeList.type == 4"
label-width="auto"
>
<el-row>
<el-form-item label="项目名称" prop="projectNo" style="width: 45%">
<el-select
style="width: 100%"
v-model="FormList.projectNo"
placeholder="请选择项目名称"
@change="ProjectChange"
:disabled="typeList.status == 'projectDeptReplay'"
>
<el-option
v-for="dict in ProjectListData"
:key="dict.projectNo"
:label="dict.projectName"
:value="dict.projectNo"
/>
</el-select>
</el-form-item>
<el-form-item label="项目编号" style="width: 45%">
<el-input
disabled
v-model="FormList.projectNo"
readonly
class="readonlyClass"
:disabled="typeList.status == 'projectDeptReplay'"
/>
</el-form-item>
<el-form-item label="责任人:" style="width: 45%" prop="chargeUser">
<el-input
disabled
v-model="FormList.chargeUser"
placeholder="请输入责任人"
:disabled="typeList.status == 'projectDeptReplay'"
/>
</el-form-item>
<el-form-item
label="整改发起时间:"
style="width: 45%"
prop="abarbeitungStartTime"
>
<el-date-picker
style="width: 100%"
clearable
format="YYYY-MM-DD"
value-format="YYYY-MM-DD HH:mm:ss"
v-model="FormList.abarbeitungStartTime"
type="date"
range-separator="到"
placeholder="整改发起时间"
:disabled="typeList.status == 'projectDeptReplay'"
/>
</el-form-item>
<el-form-item
label="限制整改时间:"
style="width: 45%"
prop="abarbeitungEndTime"
>
<el-date-picker
style="width: 100%"
clearable
format="YYYY-MM-DD"
value-format="YYYY-MM-DD HH:mm:ss"
v-model="FormList.abarbeitungEndTime"
type="date"
range-separator="到"
placeholder="请选择限制整改时间"
:disabled="typeList.status == 'projectDeptReplay'"
/>
</el-form-item>
<!-- <el-form-item label='项目建设内容:' style="width: 90%;" props="city">
<el-input style="width: 100%;" v-model="FormList.projectName" type="textarea" placeholder="项目建设内容" />
</el-form-item> -->
<el-form-item
label="补充说明:"
style="width: 92%"
prop="supplementaryInstruction"
>
<el-input
v-model="FormList.supplementaryInstruction"
type="textarea"
placeholder="请输入补充说明"
:disabled="typeList.status == 'projectDeptReplay'"
/>
</el-form-item>
<el-form-item
label="指定处理人:"
prop="dealUsers"
style="width: 45%"
>
<el-select
clearable
v-model="FormList.dealUsers"
class="m-2"
placeholder="请选择指定处理人"
size="mini"
style="width: 100%"
:disabled="typeList.status == 'projectDeptReplay'"
>
<el-option
v-for="item in personList"
:key="item.userId"
:label="item.nickName"
:value="item.userId + ''"
/>
</el-select>
</el-form-item>
<!-- <el-form-item label='处理意见：' style="width: 100%;" props="province">
<el-input style="width: 100%;" v-model="FormList.supplement" type="textarea"
placeholder="处理意见" />
</el-form-item> -->
<el-form-item
label="流程抄送人:"
prop="pushUsers"
style="width: 45%"
>
<el-select
clearable
v-model="FormList.pushUsers"
class="m-2"
placeholder="请选择流程抄送人"
size="mini"
style="width: 100%"
:disabled="typeList.status == 'projectDeptReplay'"
>
<el-option
v-for="item in personList"
:key="item.userId"
:label="item.nickName"
:value="item.userId + ''"
/>
</el-select>
</el-form-item>
<el-form-item
label="附件:"
prop="fileSaveRequestList"
style="width: 100%"
v-if="[4, 6].includes(typeList.type)"
>
<el-upload
v-model:file-list="FormList.fileSaveRequestList"
class="upload-demo upload"
action="/prod-api/system/upload"
:headers="uploadHeader"
multiple
:on-preview="handlePreview"
:before-remove="beforeRemove"
style="width: 100%"
>
<el-button type="primary">选择文件</el-button>
<template #tip>
<div class="el-upload__tip">支持CSV格式,可一次性上传多个文件</div>
</template>
</el-upload>
</el-form-item>
</el-row>
</el-form>
<el-divider content-position="left">整改问题清单</el-divider>
<div style="text-align: right">
<el-button
type="primary"
v-if="typeList.type == 3 || typeList.type == 'add'"
@click="addInfoList(null, 3)"
>新增问题清单</el-button
>
</div>
<el-table
:data="projectList"
:span-method="objectSpanMethod"
border
style="width: 100%; margin-top: 10px"
>
<el-table-column type="index" width="55" align="center" />
<el-table-column
align="center"
prop="problemType"
label="问题类型"
width="180"
/>
<el-table-column align="center" prop="checkItem" label="检查项" />
<!-- <el-table-column label="检查项明细" prop="nodeName">
</el-table-column> -->
<el-table-column
align="center"
prop="problemDescription"
label="整改前问题描述"
>
</el-table-column>
<el-table-column
align="center"
prop="abarbeitungRequire"
label="整改要求"
>
</el-table-column>
<el-table-column align="center" prop="abarbeitungType" label="整改类型">
<template #default="scope">
<dict-tag
:options="abarbeitung_type"
:value="scope.row.abarbeitungType"
/>
</template>
</el-table-column>
<!-- <el-table-column
prop="abarbeitungDescription"
label="整改措施说明"
v-if="typeList.type == 6 || typeList.type == 4"
align="center"
>
<template #default="{ row }">
<span v-if="typeList.type == 4">{{
row.abarbeitungDescription
}}</span>
<el-input
v-else
type="textarea"
v-model="row.abarbeitungDescription"
placeholder="请输入整改措施说明"
/>
</template>
</el-table-column> -->
<el-table-column
prop="fileSaveRequestList"
label="整改前附图"
align="center"
>
<template #default="{ row }">
<el-image
preview-teleported
style="width: 60px;"
v-for="i in row?.fileSaveRequestList"
:src="i.url"
:zoom-rate="1"
:initial-index="14"
:preview-src-list="[i.url]"
/>
</template>
</el-table-column>
<!-- <el-table-column
prop="afterRectificationFileList"
label="整改后附图"
align="center"
v-if="typeList.type == 6 || typeList.type == 4"
>
<template #default="{ row }">
<el-image
preview-teleported
v-if="typeList.type == 4"
style="width: 60px;z-index:9999"
v-for="i in row?.afterRectificationFileList"
:src="i.url"
:zoom-rate="1"
:initial-index="14"
:preview-src-list="[i.url]"
/>
<el-upload
v-else
list-type="picture"
v-model:file-list="row.afterRectificationFileList"
class="upload-demo"
action="/prod-api/system/upload"
:headers="uploadHeader"
multiple
:on-preview="handlePreview"
:before-remove="beforeRemove"
:disabled="typeList.type != 6"
>
<el-icon><Plus /></el-icon>
</el-upload>
</template>
</el-table-column> -->
<el-table-column label="操作" align="center" fixde="right" width="320">
<template #default="{ row }">
<el-button
type="primary"
plain
icon="View"
@click="addInfoList(row, 1)"
>详情</el-button
>
<el-button
type="primary"
plain
icon="Edit"
@click="handle(row)"
v-show="typeList.type === 6 && row.status === '1'"
>处理</el-button
>
<el-button
v-if="typeList.type != 4"
type="danger"
plain
icon="Delete"
@click="addInfoList(row, 2)"
v-hasPermi="['monitor:job:info']"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<el-form-item
v-if="typeList.type == 4 && stapesDate?.length > 0"
props="stapesDate"
>
<el-divider content-position="left">流程日志</el-divider>
<el-steps direction="vertical" :active="stapesDate?.length">
<el-step
v-for="(i, index) in stapesDate"
:title="i.activityName"
style=" height:30px;width:230px"
>
<template #description>
<div class="direction">时间:{{ i.endTime }}</div>
<div class="direction">分配人:{{ i.assigneeName }}</div>
<!-- <div class="direction">任务备注:{{ i.comment }}</div> -->
</template>
</el-step>
</el-steps>
</el-form-item>
</div>
<el-dialog
v-model="infoDalgo"
title="整改问题清单"
:modal-append-to-body="false"
:close-on-click-modal="false"
width="50%"
style="min-height: 60%"
>
<el-form
label-width="auto"
ref="ruleForm"
inline
:model="dataForm"
v-if="infoDalgo"
:disabled="ziShow == 1"
>
<el-row>
<el-form-item
label="问题类型:"
prop="patrolProblemId"
style="width: 97%"
>
<el-select
clearable
@change="probolmChange"
v-model="dataForm.patrolProblemId"
placeholder="请选择问题类型"
style="width: 100%"
>
<el-option
v-for="dict in Problome"
:key="dict.id"
:label="dict.problemType"
:value="dict.id"
/>
</el-select>
</el-form-item>
<el-form-item label="检查项:" prop="checkItem" style="width: 97%">
<el-input
disabled
v-model="dataForm.checkItem"
placeholder="请输入检查项"
/>
</el-form-item>
<el-form-item
label="整改问题描述:"
style="width: 97%"
prop="problemDescription"
>
<el-input
disabled
type="textarea"
v-model="dataForm.problemDescription"
placeholder="请输入整改项"
clearable
/>
</el-form-item>
<el-form-item
style="width: 93%"
label="整改前附图:"
props="fileSaveRequestList"
>
<el-image
style="width: 60px"
v-for="i in dataForm?.fileSaveRequestList"
:src="i.url"
:zoom-rate="1"
:initial-index="14"
:preview-src-list="[i.url]"
/>
</el-form-item>
<el-form-item label="整改要求:" style="width: 97%">
<el-input
type="textarea"
v-model="dataForm.abarbeitungRequire"
placeholder="请输入整改要求"
clearable
/>
</el-form-item>
<el-form-item label="整改类型:" style="width: 97%">
<el-select
clearable
v-model="dataForm.abarbeitungType"
placeholder="请选择整改类型"
style="width: 100%"
>
<el-option
v-for="dict in abarbeitung_type"
:key="dict.id"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item
style="width: 93%"
label="整改后附图:"
props="afterRectificationFileList"
v-if="ziShow == 1 && dataForm?.afterRectificationFileList?.length > 0"
>
<el-image
v-if="ziShow == 1"
style="width: 60px"
v-for="i in dataForm?.afterRectificationFileList"
:src="i.url"
:zoom-rate="1"
:initial-index="14"
:preview-src-list="[i.url]"
/>
<el-upload
v-else
list-type="picture"
v-model:file-list="dataForm.afterRectificationFileList"
class="upload-demo"
action="/prod-api/system/upload"
:headers="uploadHeader"
multiple
:on-preview="handlePreview"
:before-remove="beforeRemove"
>
<el-icon class="avatar-uploader-icon"><Plus /></el-icon>
</el-upload>
</el-form-item>
</el-row>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button v-if="ziShow != 1" type="primary" @click="submitForm"
>确 定</el-button
>
<el-button @click="infoDalgo = false">关 闭 </el-button>
</div>
</template>
</el-dialog>
<el-dialog
v-model="handleVisible"
title="处理"
:modal-append-to-body="false"
:close-on-click-modal="false"
width="50%"
:before-close="handleClose"
style="min-height: 60%"
>
<el-form
label-width="auto"
ref="handleFormRef"
:model="handleForm"
:rules="handleFormRules"
v-if="handleVisible"
>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="项目名称:" prop="projectName">
<el-input
disabled
v-model="handleForm.projectName"
style="width: 100%"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="问题类型:"
prop="problemType"
>
<el-input
disabled
v-model="handleForm.problemType"
style="width: 100%"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="检查项:" prop="checkItem">
<el-input
disabled
v-model="handleForm.checkItem"
style="width: 100%"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="整改前问题描述:"
prop="problemDescription"
>
<el-input
disabled
type="textarea"
v-model="handleForm.problemDescription"
style="width: 100%"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="整改要求:" prop="abarbeitungRequire">
<el-input
disabled
type="textarea"
v-model="handleForm.abarbeitungRequire"
style="width: 100%"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="整改类型:" prop="abarbeitungType">
<el-select
v-model="handleForm.abarbeitungType"
style="width: 100%"
disabled
>
<el-option
v-for="dict in abarbeitung_type"
:key="dict.id"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item
label="整改前附图:"
props="fileSaveRequestList"
>
<el-image
style="width: 60px"
v-for="i in handleForm?.fileSaveRequestList"
:src="i.url"
:zoom-rate="1"
:initial-index="14"
:preview-src-list="[i.url]"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item
label="整改状态:"
prop="status"
>
<el-select
v-model="handleForm.status"
style="width: 100%"
disabled
>
<el-option key="1" label="未整改" value="1"/>
<el-option key="0" label="已整改" value="0"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="整改完成时间:"
prop="completeTime"
>
<el-date-picker
placeholder="请选择整改完成时间"
value-format="YYYY-MM-DD"
v-model="handleForm.completeTime"
type="date"
></el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="整改措施说明:" prop="abarbeitungDescription">
<el-input
v-model="handleForm.abarbeitungDescription"
type="textarea" placeholder="请输入整改措施说明"
style="width: 100%"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-form-item
label="整改后附图:"
prop="afterRectificationFileList"
>
<el-upload
list-type="picture"
v-model:file-list="handleForm.afterRectificationFileList"
class="upload-demo"
action="/prod-api/system/upload"
:headers="uploadHeader"
multiple
:on-preview="handlePreview"
:before-remove="beforeRemove"
>
<el-icon class="avatar-uploader-icon"><Plus /></el-icon>
</el-upload>
</el-form-item>
</el-row>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="handleSubmitForm"
>确 定</el-button
>
<el-button @click="handleClose">关 闭 </el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { ref, reactive, onMounted, defineEmits, defineProps, defineExpose, nextTick } from "vue";
import {
projectTypeList,
projectCompany,
userList,
projectPatrolProblemPage,
projectQualityReformRecordAdd,
projectQualityReformRecordEdit,
projectQualityReformRecordSubmit,
projectQualityReformRecordapprove,
projectPatrolProblemselectByProjectNo,
getProjectQualityReformDetailById,
projectQualityReformDetailEdit
} from "@/api/qualityRectification";
import { projectInfoList, FileSystemList } from "@/api/project/tenderReview";
import { workflowProcess } from "@/api/project/qualityRectificationDetails";
import { getToken } from "@/utils/auth";
import { ElMessage, ElMessageBox } from "element-plus";
import { required } from '@/utils/validate-helper'
import { inheritAttr } from '@/utils/v3'
const { typeList } = defineProps(["typeList"]);
const { proxy } = getCurrentInstance();
const { abarbeitung_type } = proxy.useDict("abarbeitung_type");
const emits = defineEmits();
const project_TypeId = ref([]);
const infoDalgo = ref(false);
const unit_list = ref([]);
const personList = ref([]);
const projectList = ref([]);
const dataForm = ref({});
const ProjectListData = ref([]);
const Problome = ref([]);
// const fileList1 = ref([]);
const uploadHeader = ref({
Authorization: "Bearer " + getToken(),
});
const stapesDate = ref([]);
const handleForm = reactive({
problemNo: '',
projectName: '',
checkItem: '',
problemType: '',
problemDescription: '',
abarbeitungRequire: '',
abarbeitungType: '',
fileSaveRequestList: [],
status: '',
completeTime: '',
abarbeitungDescription: '',
afterRectificationFileList: []
});
const handleFormRules = reactive({
completeTime: required('整改完成时间'),
abarbeitungDescription: required('整改措施说明')
})
const handleVisible = ref(false);
let curRow = null
defineExpose({ closed, submit, resect });
let FormList = ref({
pageNum: 1,
pageSize: 10,
});
const rules = reactive({
abarbeitungStartTime: required('整改发起时间'),
abarbeitungEndTime: required('限制整改时间')
})
function handlePreview(file) {
return ElMessageBox.confirm(`下载此文件: ${file.name}？`).then(
() => window.open(file.url),
() => false
);
}
function beforeRemove(file) {
return true;
}
function submit(v) {
proxy.$refs.ruleForm.validate((valid) => {
if (valid) {
// let arr = [];
// projectList.value.forEach((i) => {
// if (i?.afterRectificationFileList?.length > 0) {
// i.afterRectificationFileList.forEach((k) => {
// k.refType = "proProjectQualityReformDetail";
// k.url = k.response.data.url;
// k.name = k.response.data.name;
// k.originalName = k.response.data.originalName;
// arr.push({
// refType: "proProjectQualityReformDetail",
// url: k.response.data.url,
// name: k.response.data.name,
// originalName: k.response.data.originalName,
// });
// });
// }
// i.fileSaveRequestList = arr;
// });
FormList.value.projectQualityReformDetailSaveRequestList =
projectList.value;
let { dealUsers, pushUsers } = FormList.value;
if (pushUsers?.length > 0 && Array.isArray(pushUsers)) {
FormList.value.pushUsers = pushUsers.join(",");
}
if (dealUsers?.length > 0 && Array.isArray(dealUsers)) {
FormList.value.dealUsers = dealUsers?.join(",");
}
// 编辑
if (FormList.value.type == 5) {
projectQualityReformRecordEdit(FormList.value).then(({ code }) => {
if (code == 200) {
emits("onModalClose");
}
});
} else if (FormList.value.type == 6) {
const isSubmit = projectList.value.every(item => item.status === '0')
if(!isSubmit) return ElMessage({ message: "整改问题全部处理完成才能进行操作", type: "warning"})
let fileSaveRequestList = []
if(FormList.value.fileSaveRequestList) {
fileSaveRequestList = FormList.value.fileSaveRequestList.map(item => {
const it = item.response.data || item
it.refType = 'projectQualityReform'
return it
})
}
const params = { ...FormList.value, fileSaveRequestList }
console.log(params)
projectQualityReformRecordapprove(params).then(({ code }) => {
if (code == 200) {
emits("onModalClose");
}
});
} else if (FormList.value.type == 3 || v == 6) {
if (!FormList.value.dealUsers) {
ElMessage({
message: "请您选择指定处理人",
type: "warning",
});
} else {
projectQualityReformRecordSubmit(FormList.value).then(({ code }) => {
if (code == 200) {
emits("onModalClose");
}
});
}
} else {
projectQualityReformRecordAdd(FormList.value).then(({ code }) => {
if (code == 200) {
emits("onModalClose");
}
});
}
}
});
}
function closed() {
FormList.value = {};
emits("onModalClose");
}
function resect() {
FormList.value = {};
projectList.value = [];
}
const projectTypeListM = async () => {
let { data } = await projectTypeList();
project_TypeId.value = data;
};
const projectCompanyM = async () => {
let { data } = await projectCompany();
unit_list.value = data;
};
const userListM = async () => {
let { data } = await userList();
personList.value = data;
FormList.value = typeList;
getFileList()
};
/**获取所有的项目数据 */
function loadProjerctListData() {
projectInfoList().then((response) => {
ProjectListData.value = response.data;
});
}
const ziShow = ref();
//新增质量问题清单
function addInfoList(v, t) {
ziShow.value = t;
if (t == 1) {
dataForm.value = v;
console.log("vv", v);
infoDalgo.value = true;
} else if (t == 3) {
dataForm.value = {};
infoDalgo.value = true;
// fileList1.value=[]
} else {
let c = projectList.value.findIndex((i) => {
return i.id == v.id;
});
projectList.value.splice(c, 1);
}
}
const projectPatrolProblemPageM=async (p)=>{
// let {data: { chargeUser } }=await projectPatrolProblemPage(p)
const curInfo = ProjectListData.value.find(item => item.projectNo === p)
FormList.value.chargeUser = curInfo.chargeUser;
projectPatrolProblemselectByProjectNo(p).then(({ data }) => {
Problome.value = data;
});
}
//根据项目获取项目清单
function ProjectChange(p) {
projectList.value = [];
projectPatrolProblemPageM(p)
}
// 新增修改单却确定
function submitForm() {
projectList.value.push(dataForm.value);
infoDalgo.value = false;
}
function probolmChange(v) {
dataForm.value = Problome.value.find((item) => {
return item.id === v;
});
dataForm.value.patrolProblemId = v;
console.log(dataForm.value, 231);
projectList.value.forEach(i=>{
if(i.id==v){
ElMessage({
message: "您重复添加整改单，请重新选择",
type: "warning",
});
dataForm.value={}
}else{
}
})
console.log("projectList.valueprojectList.value", projectList.value)
}
//获取流程日志
const workflowProcessM = async () => {
let params = {
businessKey: typeList.id,
workflowKey: "projectQualityReformRecord",
workflowUserId: "",
};
let { data } = await workflowProcess(params);
stapesDate.value = data;
};
const handleSubmitForm = () => {
proxy.$refs.handleFormRef.validate(async (valid, fields) => {
if(valid){
const { problemNo, completeTime, abarbeitungDescription, afterRectificationFileList } = handleForm
const fileSaveRequestList = afterRectificationFileList.map(item => item?.response?.data || item)
const params = {
id: curRow.id,
problemNo,
completeTime,
abarbeitungDescription,
fileSaveRequestList
}
console.log(params)
const res = await projectQualityReformDetailEdit(params)
if(res?.code !== 200) return
ElMessage({
message: "操作成功",
type: "success",
})
curRow.status = '0'
curRow.completeTime = completeTime
curRow.abarbeitungDescription = abarbeitungDescription
curRow.afterRectificationFileList = fileSaveRequestList
handleClose()
} else {
console.log('error submit!', fields)
}
})
}
const handleClose = () => {
proxy.$refs.handleFormRef.resetFields()
nextTick(() => {
handleVisible.value = false
curRow = null
})
}
const handle = (row) => {
console.log(row)
curRow = row
handleVisible.value = true
getDetail(row.id)
}
const getDetail = async (id) => {
const res = await getProjectQualityReformDetailById(id)
if(res?.code !== 200) return
inheritAttr(res.data, handleForm)
handleForm.projectName = FormList.value.projectName
console.log(handleForm)
}
const getFileList = async () => {
const res = await FileSystemList({ refId: FormList.value.id, refType: "projectQualityReform"})
if(res?.code !== 200) return
FormList.value.fileSaveRequestList = res.data
}
onMounted(() => {
console.log(typeList, "typeListtypeList1111");
projectList.value = typeList.projectQualityReformDetailSaveRequestList;
projectTypeListM();
projectCompanyM();
userListM();
loadProjerctListData();
if (typeList.status != "start" && typeList.type != "add") {
workflowProcessM();
} else {
proxy.$refs.ruleForm.resetFields();
}
// projectPatrolProblemPageM(typeList.projectNo)
});
</script>
<style lang="scss" scoped>
.water-analysis-page4 {
padding: 20px;
:deep(.el-upload-list) {
width: 100%;
display: flex;
flex-wrap: wrap;
}
:deep(.el-upload-list__item) {
width: 102px;
margin: 0 10px;
}
:deep(.el-upload-list__item-file-name) {
color: #fff;
}
:deep(.el-upload-list__item .el-icon--close-tip) {
color: #fff;
}
:deep(.upload) {
.el-upload-list__item {
width: 100%;
}
.el-upload-list__item-file-name {
color: #000;
}
}
}
.direction {
min-width: 190px;
}
</style>