| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> |
| | | <el-form-item label="公司名" prop="companyName"> |
| | | <el-input |
| | | v-model="queryParams.companyName" |
| | | placeholder="请输入公司名" |
| | | clearable |
| | | @keyup.enter.native="handleQuery" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="部门名称" prop="deptName"> |
| | | <el-input |
| | | v-model="queryParams.deptName" |
| | | placeholder="请输入部门名称" |
| | | clearable |
| | | @keyup.enter.native="handleQuery" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> |
| | | <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | |
| | | <el-row :gutter="10" class="mb8"> |
| | | <el-row> |
| | | <el-col :span="8" v-for="(item) in tableData" :key="o" style="margin: 10px;width: 30%;"> |
| | | <el-card :body-style="{ padding: '0px' }"> |
| | | <img 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> |
| | | <div class="bottom clearfix"> |
| | | <time class="time">{{ item.startTime }} — {{ item.endTime }}</time> |
| | | <el-button type="text" class="button" @click="handleDetail(item)">查看详情</el-button> |
| | | </div> |
| | | </div> |
| | | </el-card> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | <el-row :gutter="10" class="mb8" style="margin-top: 40px;"> |
| | | <el-col :span="1.5"> |
| | | <el-button |
| | | type="primary" |
| | |
| | | @click="handleAdd" |
| | | >新增</el-button> |
| | | </el-col> |
| | | <el-col :span="1.5"> |
| | | <!-- <el-col :span="1.5"> |
| | | <el-button |
| | | type="success" |
| | | plain |
| | |
| | | :disabled="single" |
| | | @click="handleUpdate" |
| | | >修改</el-button> |
| | | </el-col> |
| | | <el-col :span="1.5"> |
| | | </el-col> --> |
| | | <!-- <el-col :span="1.5"> |
| | | <el-button |
| | | type="danger" |
| | | plain |
| | |
| | | :disabled="multiple" |
| | | @click="handleDelete" |
| | | >删除</el-button> |
| | | </el-col> |
| | | <el-col :span="1.5"> |
| | | <el-button |
| | | type="warning" |
| | | plain |
| | | icon="el-icon-download" |
| | | size="mini" |
| | | @click="handleExport" |
| | | >导出</el-button> |
| | | </el-col> |
| | | <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> |
| | | </el-col> --> |
| | | </el-row> |
| | | |
| | | |
| | | <el-table |
| | | :data="tableData" |
| | | style="width: 100%"> |
| | | <el-table-column type="expand"> |
| | | <template slot-scope="props"> |
| | | <!-- 添加或修改【请填写功能名称】对话框 --> |
| | | <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="500px" 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"> |
| | |
| | | 48小时后未修复,累计扣分:扣<el-input v-model="props.row.time24" type="number" min="0" max="100" placeholder="请输入扣分"></el-input>分*镜头数量*天 |
| | | </div> |
| | | </el-collapse-item> |
| | | <el-upload |
| | | action="#" |
| | | list-type="picture-card" |
| | | :auto-upload="false"> |
| | | <i slot="default" class="el-icon-plus"></i> |
| | | <div slot="file" slot-scope="{file}"> |
| | | <img |
| | | class="el-upload-list__item-thumbnail" |
| | | :src="file.url" alt="" |
| | | > |
| | | <span class="el-upload-list__item-actions"> |
| | | <span |
| | | class="el-upload-list__item-preview" |
| | | @click="handlePictureCardPreview(file)" |
| | | > |
| | | <i class="el-icon-zoom-in"></i> |
| | | </span> |
| | | <span |
| | | v-if="!disabled" |
| | | class="el-upload-list__item-delete" |
| | | @click="handleDownload(file)" |
| | | > |
| | | <i class="el-icon-download"></i> |
| | | </span> |
| | | <span |
| | | v-if="!disabled" |
| | | class="el-upload-list__item-delete" |
| | | @click="handleRemove(file)" |
| | | > |
| | | <i class="el-icon-delete"></i> |
| | | </span> |
| | | </span> |
| | | </div> |
| | | </el-upload> |
| | | <el-dialog :visible.sync="dialogVisible"> |
| | | <img width="100%" :src="dialogImageUrl" alt=""> |
| | | </el-dialog> |
| | | <div style="text-align: right; margin-top: 10px;"> |
| | | <el-button type="primary" @click="submitForm1(props.row)">提交</el-button> |
| | | </div> |
| | | </el-collapse> |
| | | </el-form> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | label="公司名" |
| | | prop="companyName"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | label="部门名称" |
| | | prop="deptName"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | label="开始时间" |
| | | prop="startTime"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | label="截至时间" |
| | | prop="endTime"> |
| | | </el-table-column> |
| | | <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> |
| | | <template slot-scope="scope"> |
| | | <el-button |
| | | size="mini" |
| | | type="text" |
| | | icon="el-icon-edit" |
| | | @click="handleUpdate(scope.row)" |
| | | >修改</el-button> |
| | | <el-button |
| | | size="mini" |
| | | type="text" |
| | | icon="el-icon-delete" |
| | | @click="handleDelete(scope.row)" |
| | | >删除</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | |
| | | <pagination |
| | | v-show="total>0" |
| | | :total="total" |
| | | :page.sync="queryParams.pageNum" |
| | | :limit.sync="queryParams.pageSize" |
| | | @pagination="getList" |
| | | /> |
| | | |
| | | <!-- 添加或修改【请填写功能名称】对话框 --> |
| | | <el-dialog :title="title" :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> |
| | | |
| | | |
| | | |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | name: "Contract", |
| | | data() { |
| | | return { |
| | | dialogImageUrl: '', |
| | | dialogVisible: false, |
| | | disabled: false, |
| | | props: { |
| | | row: { |
| | | |
| | | } |
| | | }, |
| | | unitList: [], |
| | | deptList: [], |
| | | activeNames: ['1'], |
| | |
| | | contractList: [], |
| | | // 弹出层标题 |
| | | title: "", |
| | | // 详情标题 |
| | | detailName: "", |
| | | // 是否显示弹出层 |
| | | open: false, |
| | | // 是否显示详情 |
| | | detail: false, |
| | | // 查询参数 |
| | | queryParams: { |
| | | pageNum: 1, |
| | |
| | | this.selectDept(); |
| | | }, |
| | | methods: { |
| | | handleRemove(file) { |
| | | console.log(file); |
| | | }, |
| | | handlePictureCardPreview(file) { |
| | | this.dialogImageUrl = file.url; |
| | | this.dialogVisible = true; |
| | | }, |
| | | handleDownload(file) { |
| | | console.log(file); |
| | | }, |
| | | // 运维公司下拉数据 |
| | | selectUnit() { |
| | | unitSelect().then(res => { |
| | |
| | | this.open = true; |
| | | this.title = "添加合同"; |
| | | }, |
| | | /** 详情按钮操作 */ |
| | | handleDetail(item) { |
| | | this.detail = true; |
| | | this.detailName = item.companyName |
| | | }, |
| | | /** 修改按钮操作 */ |
| | | handleUpdate(row) { |
| | | this.reset(); |
| | |
| | | width: 100%; |
| | | color: #99a9bf; |
| | | } |
| | | .table-expand { |
| | | |
| | | } |
| | | .inline-input-container { |
| | | white-space: nowrap; /* 防止内容内部的换行 */ |
| | | margin-right: 50px; /* 可选的,用于在元素之间添加一些间距 */ |
| | | width: 7%; |
| | | } |
| | | |
| | | .time { |
| | | font-size: 13px; |
| | | color: #999; |
| | | } |
| | | |
| | | .bottom { |
| | | margin-top: 13px; |
| | | line-height: 12px; |
| | | } |
| | | |
| | | .button { |
| | | padding: 0; |
| | | float: right; |
| | | } |
| | | |
| | | .image { |
| | | width: 100%; |
| | | display: block; |
| | | } |
| | | |
| | | .clearfix:before, |
| | | .clearfix:after { |
| | | display: table; |
| | | content: ""; |
| | | } |
| | | |
| | | .clearfix:after { |
| | | clear: both |
| | | } |
| | | </style> |