| | |
| | | <div class="app-container"> |
| | | |
| | | <el-row> |
| | | <el-col :span="8" v-for="(item) in tableData" :key="o" style="margin: 10px;width: 30%;"> |
| | | <el-col :span="8" v-for="(item) in tableData" :key="item" style="margin: 10px;width: 30%;"> |
| | | <el-card :body-style="{ padding: '0px' }"> |
| | | <el-image style="width: 420px;height: 187px;" :preview-src-list="['https://img2.baidu.com/it/u=68398439,1553004927&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=357']" fit="cover" src="https://img2.baidu.com/it/u=68398439,1553004927&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=357" class="image"/> |
| | | <el-image style="width: 420px;height: 187px;" |
| | | :preview-src-list="['https://img2.baidu.com/it/u=68398439,1553004927&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=357']" |
| | | fit="cover" src="https://img2.baidu.com/it/u=68398439,1553004927&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=357" |
| | | class="image" /> |
| | | <div style="padding: 14px;"> |
| | | <span>{{ item.companyName }}</span> |
| | | <span class="time" style="margin-left: 10px;">{{ item.deptName }}</span> |
| | |
| | | |
| | | <el-row :gutter="10" class="mb8" style="margin-top: 40px;"> |
| | | <el-col :span="1.5"> |
| | | <el-button |
| | | type="primary" |
| | | plain |
| | | icon="el-icon-plus" |
| | | size="mini" |
| | | v-hasPermi="['system:contract:add']" |
| | | @click="handleAdd" |
| | | >新增</el-button> |
| | | </el-col> |
| | | <el-col :span="1.5"> |
| | | <el-button |
| | | type="warning" |
| | | plain |
| | | icon="el-icon-top" |
| | | size="mini" |
| | | v-hasPermi="['system:contract:import']" |
| | | @click="handleImportPoint" |
| | | >导入</el-button> |
| | | <el-button type="warning" plain icon="el-icon-top" size="mini" v-hasPermi="['system:contract:import']" |
| | | @click="handleImport">导入</el-button> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | |
| | | <!-- 添加或修改【请填写功能名称】对话框 --> |
| | | <el-dialog :title="detailName" :visible.sync="open" width="500px" append-to-body> |
| | | <el-form ref="form" :model="form" :rules="rules" label-width="80px"> |
| | | <el-form-item label="公司名" prop="companyName"> |
| | | <el-select v-model="form.companyName" placeholder="请选择"> |
| | | <el-option |
| | | v-for="item in unitList" |
| | | :key="item.id" |
| | | :label="item.value" |
| | | :value="item.id"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="部门名称" prop="deptName"> |
| | | <el-select v-model="form.deptName" placeholder="请选择"> |
| | | <el-option |
| | | v-for="item in deptList" |
| | | :key="item.id" |
| | | :label="item.value" |
| | | :value="item.id"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="合同时间" prop="timezone"> |
| | | <el-date-picker |
| | | :disabled="title === '修改合同时间'" |
| | | @change="dateChange" |
| | | v-model="form.timezone" |
| | | type="daterange" |
| | | align="right" |
| | | unlink-panels |
| | | range-separator="至" |
| | | start-placeholder="开始日期" |
| | | end-placeholder="结束日期" |
| | | > |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | </el-form> |
| | | <div slot="footer" class="dialog-footer"> |
| | | <el-button type="primary" @click="submitForm">确 定</el-button> |
| | | <el-button @click="cancel">取 消</el-button> |
| | | </div> |
| | | </el-dialog> |
| | | |
| | | <!-- 合同详情 --> |
| | | <el-dialog :title="detailName" :visible.sync="detail" width="800px" append-to-body> |
| | | <el-form label-position="left" inline class="table-expand"> |
| | | <el-collapse v-model="activeNames" @change="handleChange"> |
| | | <el-collapse-item title="视频平均在线率" name="1"> |
| | | <el-collapse class="nest-collapse" style="margin-top: 10px;"> |
| | | <el-collapse-item title="第三层-1" name="3"> |
| | | <div>≥98%:不扣分</div> |
| | | <div class="inline-input-container"> |
| | | 95%≤视频平均在线率<98%:扣0.1分 |
| | |
| | | <90%: 扣1分 |
| | | 若有连续两次省厅考核在线率低于90%,招标人有权解除合同。 |
| | | </div> |
| | | </el-collapse-item> |
| | | </el-collapse> |
| | | <el-collapse class="nest-collapse" style="margin-top: 10px;"> |
| | | <el-collapse-item title="第三层-2" name="3"> |
| | | <div>≥98%:不扣分</div> |
| | | <div class="inline-input-container"> |
| | | 95%≤视频平均在线率<98%:扣0.1分 |
| | | </div> |
| | | <div class="inline-input-container"> |
| | | 90%≤视频平均在线率<95%:扣0.5分 |
| | | </div> |
| | | <div class="inline-input-container"> |
| | | <90%: 扣1分 |
| | | 若有连续两次省厅考核在线率低于90%,招标人有权解除合同。 |
| | | </div> |
| | | </el-collapse-item> |
| | | </el-collapse> |
| | | </el-collapse-item> |
| | | <el-collapse-item title="前端感知源治理工作" name="2"> |
| | | <div class="inline-input-container"> |
| | |
| | | </el-form> |
| | | </el-dialog> |
| | | |
| | | <!-- 合同导入对话框 --> |
| | | <el-dialog :title="upload.title" :visible.sync="upload.open" width="550px" append-to-body> |
| | | <el-form ref="form" :model="upload" :rules="rules" label-width="80px"> |
| | | <el-form-item label="公司名" prop="unitId"> |
| | | <el-select v-model="upload.unitId" placeholder="请选择"> |
| | | <el-option v-for="item in unitList" :key="item.id" :label="item.value" :value="item.id"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="合同时间" prop="timezone"> |
| | | <el-date-picker :disabled="title === '修改合同时间'" @change="dateChange" v-model="upload.timezone" |
| | | value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" align="right" unlink-panels range-separator="至" |
| | | start-placeholder="开始时间" end-placeholder="结束时间"> |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" |
| | | :action="upload.url + '?unitId=' + upload.unitId + '&startTime=' + upload.startTime + '&endTime=' + upload.endTime" |
| | | :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" |
| | | :auto-upload="false" drag style="text-align: center;"> |
| | | <i class="el-icon-upload"></i> |
| | | <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div> |
| | | <div class="el-upload__tip text-center" slot="tip"> |
| | | <span>仅允许导入xls、xlsx格式文件。</span> |
| | | <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" |
| | | @click="importTemplate">下载模板</el-link> |
| | | </div> |
| | | </el-upload> |
| | | </el-form> |
| | | |
| | | <div slot="footer" class="dialog-footer"> |
| | | <el-button type="primary" @click="submitFileForm">确 定</el-button> |
| | | <el-button @click="upload.open = false">取 消</el-button> |
| | | </div> |
| | | </el-dialog> |
| | | |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import { listContract, getContract, delContract, addContract, updateContract } from "@/api/platform/contract"; |
| | | import { listContract, getContract } from "@/api/platform/contract"; |
| | | import {unitSelect} from "../../../api/platform/unit"; |
| | | import {deptSelect} from "../../../api/system/dept"; |
| | | import { getToken } from "@/utils/auth"; |
| | | |
| | | export default { |
| | | name: "Contract", |
| | | data() { |
| | | return { |
| | | // 合同导入参数 |
| | | upload: { |
| | | // 是否显示弹出层(合同导入) |
| | | open: false, |
| | | // 弹出层标题(合同导入) |
| | | title: "", |
| | | // 是否禁用上传 |
| | | isUploading: false, |
| | | // 设置上传的请求头部 |
| | | headers: { Authorization: "Bearer " + getToken() }, |
| | | // 上传的地址 |
| | | url: process.env.VUE_APP_BASE_API + "/system/contract/importData", |
| | | unitId: '', |
| | | startTime: '', |
| | | endTime: '' |
| | | }, |
| | | dialogImageUrl: '', |
| | | dialogVisible: false, |
| | | disabled: false, |
| | |
| | | open: false, |
| | | // 是否显示详情 |
| | | detail: false, |
| | | // 查询参数 |
| | | queryParams: { |
| | | pageNum: 1, |
| | | pageSize: 10, |
| | | companyId: null, |
| | | companyName: null, |
| | | deptId: null, |
| | | deptName: null, |
| | | detail: null |
| | | }, |
| | | tableData: [{ |
| | | id: '12987122', |
| | | companyName: '运维公司甲', |
| | |
| | | }, |
| | | // 表单校验 |
| | | rules: { |
| | | companyId: [ |
| | | { required: true, message: "公司id不能为空", trigger: "blur" } |
| | | unitId: [ |
| | | { required: true, message: "运维单位不能为空", trigger: "blur" } |
| | | ], |
| | | timezone: [ |
| | | { type: "array", required: true, message: "合同时间不能为空", trigger: "change" } |
| | | ] |
| | | } |
| | | }; |
| | | }, |
| | |
| | | this.selectDept(); |
| | | }, |
| | | methods: { |
| | | /** 导入按钮操作 */ |
| | | handleImport() { |
| | | this.upload.title = "合同导入"; |
| | | this.upload.open = true; |
| | | }, |
| | | /** 下载模板操作 */ |
| | | importTemplate() { |
| | | this.download('system/contract/importTemplate', { |
| | | }, `合同导入模板.xlsx`) |
| | | }, |
| | | // 文件上传中处理 |
| | | handleFileUploadProgress(event, file, fileList) { |
| | | this.upload.isUploading = true; |
| | | }, |
| | | // 文件上传成功处理 |
| | | handleFileSuccess(response, file, fileList) { |
| | | this.upload.open = false; |
| | | this.upload.isUploading = false; |
| | | this.$refs.upload.clearFiles(); |
| | | this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true }); |
| | | this.getList(); |
| | | }, |
| | | // 提交上传文件 |
| | | submitFileForm() { |
| | | let that = this; |
| | | this.$refs["form"].validate(valid => { |
| | | if (valid) { |
| | | that.$refs.upload.submit(); |
| | | } |
| | | }) |
| | | }, |
| | | // 时间选择发生变化 |
| | | dateChange() { |
| | | this.upload.startTime = this.upload.timezone[0]; |
| | | this.upload.endTime = this.upload.timezone[1]; |
| | | }, |
| | | handleRemove(file) { |
| | | console.log(file); |
| | | }, |
| | | handlePictureCardPreview(file) { |
| | | this.dialogImageUrl = file.url; |
| | | this.dialogVisible = true; |
| | | }, |
| | | handleDownload(file) { |
| | | console.log(file); |
| | | }, |
| | | // 运维公司下拉数据 |
| | | selectUnit() { |
| | |
| | | this.deptList = res.data; |
| | | }) |
| | | }, |
| | | submitForm1() { |
| | | alert('提交成功!'); |
| | | }, |
| | | handleChange(val) { |
| | | console.log(val); |
| | | }, |
| | | /** 查询【请填写功能名称】列表 */ |
| | | getList() { |
| | | this.loading = true; |
| | |
| | | this.total = response.total; |
| | | this.loading = false; |
| | | }); |
| | | }, |
| | | // 取消按钮 |
| | | cancel() { |
| | | this.open = false; |
| | | this.reset(); |
| | | }, |
| | | // 表单重置 |
| | | reset() { |
| | | this.form = { |
| | | id: null, |
| | | companyId: null, |
| | | companyName: null, |
| | | deptId: null, |
| | | deptName: null, |
| | | detail: null |
| | | }; |
| | | this.resetForm("form"); |
| | | }, |
| | | /** 搜索按钮操作 */ |
| | | handleQuery() { |
| | | this.queryParams.pageNum = 1; |
| | | this.getList(); |
| | | }, |
| | | /** 重置按钮操作 */ |
| | | resetQuery() { |
| | | this.resetForm("queryForm"); |
| | | this.handleQuery(); |
| | | }, |
| | | // 多选框选中数据 |
| | | handleSelectionChange(selection) { |
| | | this.ids = selection.map(item => item.id) |
| | | this.single = selection.length!==1 |
| | | this.multiple = !selection.length |
| | | }, |
| | | /** 新增按钮操作 */ |
| | | handleAdd() { |
| | |
| | | this.title = "修改合同"; |
| | | }); |
| | | }, |
| | | /** 提交按钮 */ |
| | | submitForm() { |
| | | this.$refs["form"].validate(valid => { |
| | | if (valid) { |
| | | if (this.form.id != null) { |
| | | updateContract(this.form).then(response => { |
| | | this.$modal.msgSuccess("修改成功"); |
| | | this.open = false; |
| | | this.getList(); |
| | | }); |
| | | } else { |
| | | addContract(this.form).then(response => { |
| | | this.$modal.msgSuccess("新增成功"); |
| | | this.open = false; |
| | | this.getList(); |
| | | }); |
| | | } |
| | | } |
| | | }); |
| | | }, |
| | | /** 删除按钮操作 */ |
| | | handleDelete(row) { |
| | | const ids = row.id || this.ids; |
| | | this.$modal.confirm('是否确认删除【请填写功能名称】编号为"' + ids + '"的数据项?').then(function() { |
| | | return delContract(ids); |
| | | }).then(() => { |
| | | this.getList(); |
| | | this.$modal.msgSuccess("删除成功"); |
| | | }).catch(() => {}); |
| | | }, |
| | | /** 导出按钮操作 */ |
| | | handleExport() { |
| | | this.download('system/contract/export', { |
| | | ...this.queryParams |
| | | }, `contract_${new Date().getTime()}.xlsx`) |
| | | } |
| | | } |
| | | }; |
| | | </script> |
| | |
| | | .table-expand { |
| | | font-size: 0; |
| | | } |
| | | |
| | | .table-expand { |
| | | width: 100%; |
| | | color: #99a9bf; |
| | | } |
| | | |
| | | .inline-input-container { |
| | | white-space: nowrap; /* 防止内容内部的换行 */ |
| | | margin-right: 50px; /* 可选的,用于在元素之间添加一些间距 */ |
| | | white-space: nowrap; |
| | | /* 防止内容内部的换行 */ |
| | | margin-right: 50px; |
| | | /* 可选的,用于在元素之间添加一些间距 */ |
| | | width: 7%; |
| | | } |
| | | |