Skip to content

F
founder_vue
Commit 1e76b315 by 米嘉伟
Options

导入文件取消

parent 8783fbc4
Showing with 1017 additions and 1118 deletions
src/views/drFPTX/Index.vue
<template>
<div
class='drFPTX'
id="drFPTX"
<div
class='drFPTX'
id="drFPTX"
>
<el-radio-group
class='drlx'
v-model="drlx"
>
<el-radio-group
class='drlx'
v-model="drlx"
>
<el-radio
:label="3"
v-if="roleArr.includes('B-1-1')"
>人员
</el-radio>
<el-radio
:label="6"
v-if="roleArr.includes('B-1-2')"
>案件
</el-radio>
<el-radio
:label="9"
v-if="roleArr.includes('B-1-3')"
>比中关系
</el-radio>
</el-radio-group>
<div class='choose'>
<div class="wjlx">
<div class="left">
<el-radio-group v-model="wjlx">
<el-radio :label="3">文件</el-radio>
<el-radio :label="6">文件夹</el-radio>
</el-radio-group>
</div>
<div class="right">
<div class='center'>
<el-input
placeholder="请选择文件路径"
v-model="fileName"
></el-input>
<div class="line"></div>
<div
class="text"
@click="wjlx==3 ? uploadFile() : uploadFiles()"
>选择
</div>
<!-- 上传 -->
<!-- style="display:none" -->
<el-upload
class="upload-demo"
ref="upload"
:multiple="true"
:action='action'
:on-preview="handlePreview"
:on-remove="handleRemove"
:on-success="uploadSuccess"
:on-change='onChange'
:on-progress="uploadProcess"
:file-list="fileList"
:auto-upload="false"
:before-upload="beforeUpload"
:show-file-list="false"
>
</el-upload>
</div>
</div>
<el-radio
:label="3"
v-if="roleArr.includes('B-1-1')"
>人员
</el-radio>
<el-radio
:label="6"
v-if="roleArr.includes('B-1-2')"
>案件
</el-radio>
<el-radio
:label="9"
v-if="roleArr.includes('B-1-3')"
>比中关系
</el-radio>
</el-radio-group>
<div class='choose'>
<div class="wjlx">
<div class="left">
<el-radio-group v-model="wjlx">
<el-radio :label="3">文件</el-radio>
<el-radio :label="6">文件夹</el-radio>
</el-radio-group>
</div>
<div class="right">
<div class='center'>
<el-input
placeholder="请选择文件路径"
v-model="fileName"
></el-input>
<div class="line"></div>
<div
class="text"
@click="wjlx==3 ? uploadFile() : uploadFiles()"
>选择
</div>
<el-button
type="primary"
@click="submitUpload"
>导入
</el-button>
<!-- 上传 -->
<!-- style="display:none" -->
<el-upload
class="upload-demo"
ref="upload"
:multiple="true"
:action='action'
:on-preview="handlePreview"
:on-remove="handleRemove"
:on-success="uploadSuccess"
:on-change='onChange'
:on-progress="uploadProcess"
:file-list="fileList"
:auto-upload="false"
:before-upload="beforeUpload"
:show-file-list="false"
>
</el-upload>
</div>
</div>
<div class="divider"></div>
<div
class='bottom'
v-show="this.drlx==3||this.drlx==6"
>
<div class="left">
<el-col :span="11">
<div class="head">
<div></div>
FPTX的条码号
</div>
<el-table
height="550"
:data="datas"
@selection-change="checkAll1"
style="width: 100%"
row-key="pid"
:tree-props="{children: 'sonBarcode', hasChildren: 'hasChildren'}"
@expand-change="hadnlExpandChange1"
>
<el-table-column
type="selection"
:width="fptxWidth1"
:selectable="checkSelectable"
>
</el-table-column>
<el-table-column
prop="wjxh"
:width="fptxWidth2"
label="文件序号"
>
<template slot-scope="scope">
<svg-icon
style="
</div>
<el-button
type="primary"
@click="submitUpload"
>导入
</el-button>
</div>
<div class="divider"></div>
<div
class='bottom'
v-show="this.drlx==3||this.drlx==6"
>
<div class="left">
<el-col :span="11">
<div class="head">
<div></div>
FPTX的条码号
</div>
<el-table
height="550"
:data="datas"
@selection-change="checkAll1"
style="width: 100%"
row-key="pid"
:tree-props="{children: 'sonBarcode', hasChildren: 'hasChildren'}"
@expand-change="hadnlExpandChange1"
>
<el-table-column
type="selection"
:width="fptxWidth1"
:selectable="checkSelectable"
>
</el-table-column>
<el-table-column
prop="wjxh"
:width="fptxWidth2"
label="文件序号"
>
<template slot-scope="scope">
<svg-icon
style="
width: 0.875rem;
height: 0.6875rem;
margin-bottom: 0.125rem;
......@@ -112,400 +112,400 @@
margin-right:0.625rem;
"
v-if="scope.row.sonBarcode || scope.row.sonBarcode === null"
icon-class="tree_f"
>
</svg-icon>
<svg-icon
style="
v-if="scope.row.sonBarcode || scope.row.sonBarcode === null"
icon-class="tree_f"
>
</svg-icon>
<svg-icon
style="
width: 0.8125rem;
height: 0.375rem;
margin: 0 0 0.1875rem 0;
"
v-else-if="!scope.row.sonBarcode || scope.row.sonBarcode !== null"
icon-class="tree_c"
></svg-icon>
{{
v-else-if="!scope.row.sonBarcode || scope.row.sonBarcode !== null"
icon-class="tree_c"
></svg-icon>
{{
scope.row.sonBarcode || scope.row.sonBarcode === null
? scope.row.wjxh
: scope.row.wjxh
}}
<div
v-show="scope.row.sonBarcode && scope.row.sonBarcode !== null&& scope.row.sonBarcode.length > 1"
class="children-count"
>
{{ scope.row.sonBarcode ? scope.row.sonBarcode.length : 0 }}
</div>
</template>
</el-table-column>
<el-table-column
prop="nx"
label="内序"
:width="fptxWidth3"
>
</el-table-column>
<el-table-column
prop="barcode"
label="条码号"
>
</el-table-column>
</el-table>
</el-col>
<el-col :span="2">
<div class="opSetting">
<div @click="handelSelect">
<el-button
icon="el-icon-arrow-right"
:disabled="nowSelectData.length?false:true"
:size="buttonSize"
type="primary"
>
</el-button>
</div>
<div
class="spacing"
@click="handleRemoveSelect"
>
<el-button
icon="el-icon-arrow-left"
:disabled="nowSelectRightData.length?false:true"
:size="buttonSize"
type="primary"
>
</el-button>
</div>
</div>
</el-col>
<el-col :span="11">
<div class="head">
<div></div>
需要导入的条码号
</div>
<el-table
height="550"
:data="selectArr"
style="width: 100%"
row-key="pid"
:tree-props="{children: 'sonBarcode'}"
@selection-change="checkRightAll"
@expand-change="hadnlExpandChange2"
>
<el-table-column
type="selection"
:width="fptxWidth1"
:selectable="checkSelectable"
>
</el-table-column>
<el-table-column
prop="wjxh"
:width="fptxWidth2"
label="文件序号"
>
<template slot-scope="scope">
<svg-icon
style="
<div
v-show="scope.row.sonBarcode && scope.row.sonBarcode !== null&& scope.row.sonBarcode.length > 1"
class="children-count"
>
{{ scope.row.sonBarcode ? scope.row.sonBarcode.length : 0 }}
</div>
</template>
</el-table-column>
<el-table-column
prop="nx"
label="内序"
:width="fptxWidth3"
>
</el-table-column>
<el-table-column
prop="barcode"
label="条码号"
>
</el-table-column>
</el-table>
</el-col>
<el-col :span="2">
<div class="opSetting">
<div @click="handelSelect">
<el-button
icon="el-icon-arrow-right"
:disabled="nowSelectData.length?false:true"
:size="buttonSize"
type="primary"
>
</el-button>
</div>
<div
class="spacing"
@click="handleRemoveSelect"
>
<el-button
icon="el-icon-arrow-left"
:disabled="nowSelectRightData.length?false:true"
:size="buttonSize"
type="primary"
>
</el-button>
</div>
</div>
</el-col>
<el-col :span="11">
<div class="head">
<div></div>
需要导入的条码号
</div>
<el-table
height="550"
:data="selectArr"
style="width: 100%"
row-key="pid"
:tree-props="{children: 'sonBarcode'}"
@selection-change="checkRightAll"
@expand-change="hadnlExpandChange2"
>
<el-table-column
type="selection"
:width="fptxWidth1"
:selectable="checkSelectable"
>
</el-table-column>
<el-table-column
prop="wjxh"
:width="fptxWidth2"
label="文件序号"
>
<template slot-scope="scope">
<svg-icon
style="
width: 0.875rem;
height: 0.6875rem;
margin-bottom: 0.125rem;
margin-left: 0.3125rem;
margin-right:0.625rem;
"
v-if="scope.row.sonBarcode || scope.row.sonBarcode === null"
icon-class="tree_f"
>
</svg-icon>
<svg-icon
style="
v-if="scope.row.sonBarcode || scope.row.sonBarcode === null"
icon-class="tree_f"
>
</svg-icon>
<svg-icon
style="
width: 0.8125rem;
height: 0.375rem;
margin: 0 0 0.1875rem 0;
"
v-else-if="!scope.row.sonBarcode || scope.row.sonBarcode !== null"
icon-class="tree_c"
></svg-icon>
{{
v-else-if="!scope.row.sonBarcode || scope.row.sonBarcode !== null"
icon-class="tree_c"
></svg-icon>
{{
scope.row.sonBarcode || scope.row.sonBarcode === null
? scope.row.wjxh
: scope.row.wjxh
}}
<div
v-show="scope.row.sonBarcode && scope.row.sonBarcode !== null&& scope.row.sonBarcode.length > 1"
class="children-count"
>
{{ scope.row.sonBarcode ? scope.row.sonBarcode.length : 0 }}
</div>
</template>
</el-table-column>
<el-table-column
prop="nx"
label="内序"
:width="fptxWidth3"
>
</el-table-column>
<el-table-column
prop="barcode"
label="条码号"
>
</el-table-column>
</el-table>
</el-col>
</div>
<div class="right">
<div class='target'>
<div class="targetHead">
{{targetHead}}
</div>
<div class="targetBody">
<el-checkbox-group v-model="checkedTargets">
<el-checkbox
v-for="(value,key) in targets"
:key="key"
:label="value.code"
>{{ value.name }}
</el-checkbox>
</el-checkbox-group>
</div>
<div
v-show="scope.row.sonBarcode && scope.row.sonBarcode !== null&& scope.row.sonBarcode.length > 1"
class="children-count"
>
{{ scope.row.sonBarcode ? scope.row.sonBarcode.length : 0 }}
</div>
</div>
</template>
</el-table-column>
<el-table-column
prop="nx"
label="内序"
:width="fptxWidth3"
>
</el-table-column>
<el-table-column
prop="barcode"
label="条码号"
>
</el-table-column>
</el-table>
</el-col>
</div>
<div class="right">
<div class='target'>
<div class="targetHead">
{{targetHead}}
</div>
<div class="targetBody">
<el-checkbox-group v-model="checkedTargets">
<el-checkbox
v-for="(value,key) in targets"
:key="key"
:label="value.code"
>{{ value.name }}
</el-checkbox>
</el-checkbox-group>
</div>
</div>
<div
class='bdbottom'
v-show="this.drlx==9"
>
<div class="left">
<el-col :span="11">
<div class="head">
<div></div>
FPTX的条码号
</div>
<el-table
height='550'
:data="datas"
@selection-change="checkAll1"
style="width: 100%"
>
<el-table-column
type="selection"
:width="fptxWidth1"
>
</el-table-column>
<el-table-column
:width="fptxWidth2"
label="文件名"
>
<template slot-scope="scope">
<div>{{scope.row.name}}</div>
</template>
</el-table-column>
<el-table-column
:width="fptxWidth3"
label="查询类型"
>
<template slot-scope="scope">
<div
v-if='scope.row.type==0'
style="color: #fa9500;"
>{{scope.row.type | typeNum}}
</div>
<div
v-if='scope.row.type==1'
style="color: #e60012;"
>{{scope.row.type | typeNum}}
</div>
<div
v-if='scope.row.type==2'
style="color: #00b47a;"
>{{scope.row.type | typeNum}}
</div>
<div
v-if='scope.row.type==3'
style="color: #055fe7;"
>{{scope.row.type | typeNum}}
</div>
</template>
</el-table-column>
<el-table-column label="案事件编号/人员编号">
<template slot-scope="scope">
<div>{{scope.row.barcode1}}</div>
<div>{{scope.row.barcode2}}</div>
</template>
</el-table-column>
</el-table>
</el-col>
<el-col :span="2">
<div class="opSetting">
<div @click="handelSelect">
<el-button
icon="el-icon-arrow-right"
:disabled="nowSelectData.length?false:true"
:size="buttonSize"
type="primary"
>
</el-button>
</div>
<div
class="spacing"
@click="handleRemoveSelect"
>
<el-button
icon="el-icon-arrow-left"
:disabled="nowSelectRightData.length?false:true"
:size="buttonSize"
type="primary"
>
</el-button>
</div>
</div>
</el-col>
<el-col :span="11">
<div class="head">
<div></div>
需要导入的条码号
</div>
<el-table
height="550"
:data="selectArr"
@selection-change="checkRightAll"
style="width: 100%"
>
<el-table-column
type="selection"
:width="fptxWidth1"
>
</el-table-column>
<el-table-column
:width="fptxWidth2"
label="文件名"
>
<template slot-scope="scope">
<div>{{scope.row.name}}</div>
</template>
</el-table-column>
<el-table-column
:width="fptxWidth3"
label="查询类型"
>
<template slot-scope="scope">
<div
v-if='scope.row.type==0'
style="color: #fa9500;"
>{{scope.row.type | typeNum}}
</div>
<div
v-if='scope.row.type==1'
style="color: #e60012;"
>{{scope.row.type | typeNum}}
</div>
<div
v-if='scope.row.type==2'
style="color: #00b47a;"
>{{scope.row.type | typeNum}}
</div>
<div
v-if='scope.row.type==3'
style="color: #055fe7;"
>{{scope.row.type | typeNum}}
</div>
</template>
</el-table-column>
<el-table-column label="案事件编号/人员编号">
<template slot-scope="scope">
<div>{{scope.row.barcode1}}</div>
<div>{{scope.row.barcode2}}</div>
</template>
</el-table-column>
</el-table>
</el-col>
</div>
<div class="right">
<div class="head">
人员逻辑分库
<div></div>
案件逻辑分库
</div>
</div>
<div
class='bdbottom'
v-show="this.drlx==9"
>
<div class="left">
<el-col :span="11">
<div class="head">
<div></div>
FPTX的条码号
</div>
<el-table
height='550'
:data="datas"
@selection-change="checkAll1"
style="width: 100%"
>
<el-table-column
type="selection"
:width="fptxWidth1"
>
</el-table-column>
<el-table-column
:width="fptxWidth2"
label="文件名"
>
<template slot-scope="scope">
<div>{{scope.row.name}}</div>
</template>
</el-table-column>
<el-table-column
:width="fptxWidth3"
label="查询类型"
>
<template slot-scope="scope">
<div
v-if='scope.row.type==0'
style="color: #fa9500;"
>{{scope.row.type | typeNum}}
</div>
<div class="bottom">
<div class="targetLeft">
<el-checkbox-group v-model="checkedTargetsLeft">
<el-checkbox
v-for="(value,key) in targetsLeft"
:key="key"
:label="value.code"
>{{ value.name }}
</el-checkbox>
</el-checkbox-group>
</div>
<div class="line"></div>
<div class="targetRight">
<el-checkbox-group v-model="checkedTargetsRight">
<el-checkbox
v-for="(value,key) in targetsRight"
:key="key"
:label="value.code"
>{{ value.name }}
</el-checkbox>
</el-checkbox-group>
</div>
<div
v-if='scope.row.type==1'
style="color: #e60012;"
>{{scope.row.type | typeNum}}
</div>
</div>
</div>
<el-dialog
style=" margin-top:10vh"
:visible.sync="dialogVisible"
width="30rem"
:modal-append-to-body="false"
:close-on-click-modal='false'
>
<div v-if="showProgress">
<el-progress
type="circle"
:percentage="UploadPercent"
></el-progress>
<div
v-show="UploadPercent<100"
style="margin-top:.9375rem; margin-bottom:.9375rem;font-size: .875rem;font-family: MicrosoftYaHei;color: #909090;"
>正在上传指纹文件，点击“取消”可终止处理
v-if='scope.row.type==2'
style="color: #00b47a;"
>{{scope.row.type | typeNum}}
</div>
<div
v-show="UploadPercent==100"
style="margin-top:.9375rem; margin-bottom:.9375rem;font-size: .875rem;font-family: MicrosoftYaHei;color: #909090;"
>正在解析指纹文件，请稍等。。。
v-if='scope.row.type==3'
style="color: #055fe7;"
>{{scope.row.type | typeNum}}
</div>
<el-button
@click="abort"
v-show="UploadPercent<100"
><span style="color:#333;font-size: 14px;">取消</span></el-button>
<el-button
v-show="UploadPercent==100"
disabled
><span style="color:#333;font-size: 14px;">正在入库</span></el-button>
</template>
</el-table-column>
<el-table-column label="案事件编号/人员编号">
<template slot-scope="scope">
<div>{{scope.row.barcode1}}</div>
<div>{{scope.row.barcode2}}</div>
</template>
</el-table-column>
</el-table>
</el-col>
<el-col :span="2">
<div class="opSetting">
<div @click="handelSelect">
<el-button
icon="el-icon-arrow-right"
:disabled="nowSelectData.length?false:true"
:size="buttonSize"
type="primary"
>
</el-button>
</div>
<div
class="spacing"
@click="handleRemoveSelect"
>
<el-button
icon="el-icon-arrow-left"
:disabled="nowSelectRightData.length?false:true"
:size="buttonSize"
type="primary"
>
</el-button>
</div>
<div v-else>
<div>
<img
style="width: 8.375rem;height:8.375rem"
src="../../assets/img/drFptx/success.svg"
alt=""
>
</div>
</el-col>
<el-col :span="11">
<div class="head">
<div></div>
需要导入的条码号
</div>
<el-table
height="550"
:data="selectArr"
@selection-change="checkRightAll"
style="width: 100%"
>
<el-table-column
type="selection"
:width="fptxWidth1"
>
</el-table-column>
<el-table-column
:width="fptxWidth2"
label="文件名"
>
<template slot-scope="scope">
<div>{{scope.row.name}}</div>
</template>
</el-table-column>
<el-table-column
:width="fptxWidth3"
label="查询类型"
>
<template slot-scope="scope">
<div
v-if='scope.row.type==0'
style="color: #fa9500;"
>{{scope.row.type | typeNum}}
</div>
<div style="margin-top:.9375rem; margin-bottom:.9375rem;font-size: .875rem;font-family: MicrosoftYaHei;color: #909090;">
导入成功{{successCount}}条，失败{{failCount}}条
<div
v-if='scope.row.type==1'
style="color: #e60012;"
>{{scope.row.type | typeNum}}
</div>
<el-button
class='ckxq'
style="background: #055FE7;border-radius: .25rem; border-color:#055FE7;"
@click="goList"
><span style="color:#fff;font-size: 14px;">查看详情</span></el-button>
</div>
</el-dialog>
<div
v-if='scope.row.type==2'
style="color: #00b47a;"
>{{scope.row.type | typeNum}}
</div>
<div
v-if='scope.row.type==3'
style="color: #055fe7;"
>{{scope.row.type | typeNum}}
</div>
</template>
</el-table-column>
<el-table-column label="案事件编号/人员编号">
<template slot-scope="scope">
<div>{{scope.row.barcode1}}</div>
<div>{{scope.row.barcode2}}</div>
</template>
</el-table-column>
</el-table>
</el-col>
</div>
<div class="right">
<div class="head">
人员逻辑分库
<div></div>
案件逻辑分库
</div>
<div class="bottom">
<div class="targetLeft">
<el-checkbox-group v-model="checkedTargetsLeft">
<el-checkbox
v-for="(value,key) in targetsLeft"
:key="key"
:label="value.code"
>{{ value.name }}
</el-checkbox>
</el-checkbox-group>
</div>
<div class="line"></div>
<div class="targetRight">
<el-checkbox-group v-model="checkedTargetsRight">
<el-checkbox
v-for="(value,key) in targetsRight"
:key="key"
:label="value.code"
>{{ value.name }}
</el-checkbox>
</el-checkbox-group>
</div>
</div>
</div>
</div>
<el-dialog
style=" margin-top:10vh"
:visible.sync="dialogVisible"
width="30rem"
:modal-append-to-body="false"
:close-on-click-modal='false'
>
<div v-if="showProgress">
<el-progress
type="circle"
:percentage="UploadPercent"
></el-progress>
<div
v-show="UploadPercent<100"
style="margin-top:.9375rem; margin-bottom:.9375rem;font-size: .875rem;font-family: MicrosoftYaHei;color: #909090;"
>正在上传指纹文件，点击“取消”可终止处理
</div>
<div
v-show="UploadPercent==100"
style="margin-top:.9375rem; margin-bottom:.9375rem;font-size: .875rem;font-family: MicrosoftYaHei;color: #909090;"
>正在解析指纹文件，请稍等。。。
</div>
<el-button
@click="abort"
v-show="UploadPercent<100"
><span style="color:#333;font-size: 14px;">取消</span></el-button>
<el-button
v-show="UploadPercent==100"
disabled
><span style="color:#333;font-size: 14px;">正在入库</span></el-button>
</div>
<div v-else>
<div>
<img
style="width: 8.375rem;height:8.375rem"
src="../../assets/img/drFptx/success.svg"
alt=""
>
</div>
<div style="margin-top:.9375rem; margin-bottom:.9375rem;font-size: .875rem;font-family: MicrosoftYaHei;color: #909090;">
导入成功{{successCount}}条，失败{{failCount}}条
</div>
<el-button
class='ckxq'
style="background: #055FE7;border-radius: .25rem; border-color:#055FE7;"
@click="goList"
><span style="color:#fff;font-size: 14px;">查看详情</span></el-button>
</div>
</el-dialog>
</div>
</template>
......@@ -517,9 +517,9 @@ import axios from 'axios'
export default {
name: 'drFPTX',
components: {},
mounted() {
mounted () {
},
data() {
data () {
return {
successCount: 0, // 成功条数
failCount: 0, // 失败条数
......@@ -569,7 +569,7 @@ export default {
expandedRight: null, // 左边表格展开关闭标志
}
},
created() {
created () {
let w1 = 1920
let w2 = window.innerWidth
......@@ -578,7 +578,7 @@ export default {
this.fptxWidth3 = this.fptxWidth3 * w2 / w1
},
watch: {
drlx(newValue, oldValue) {
drlx (newValue, oldValue) {
if (newValue == 3) {
this.targetHead = '人员逻辑分库'
this.targets = this.$store.state.ljk.targetOptions_ry
......@@ -626,7 +626,7 @@ export default {
},
methods: {
// 展开或关闭行
hadnlExpandChange1(row, expanded) {
hadnlExpandChange1 (row, expanded) {
// console.log(row, expanded, "zhankaiguanbi")
// 获取下标
var i = this.datas.findIndex((table) => table.wjxh === row.wjxh)
......@@ -666,7 +666,7 @@ export default {
}
},
// 展开或关闭行
hadnlExpandChange2(row, expanded) {
hadnlExpandChange2 (row, expanded) {
// console.log(row, expanded, "zhankaiguanbi")
// 获取下标
var i = this.selectArr.findIndex((table) => table.wjxh === row.wjxh)
......@@ -706,11 +706,11 @@ export default {
}
},
// 判断能不能选择
checkSelectable(row) {
checkSelectable (row) {
return row.sonBarcode
},
// 导入成功,跳转详情
goList() {
goList () {
if (this.drlx == 3) {
this.dialogVisible = false
......@@ -764,10 +764,11 @@ export default {
}
},
// 取消上传
abort() {
abort () {
this.nowSelectRightData = []
this.dialogVisible = false
// this.cancel()
this.UploadPercent = 0
fHttp.cancel()
// this.$refs.upload.clearFiles(); // 清空上传列表
......@@ -775,23 +776,12 @@ export default {
},
// 上传进度
uploadProcess(event, file, fileList) {
// //console.log(event)
uploadProcess (event, file, fileList) {
this.dialogVisible = true
// this.UploadPercent = Number(file.percentage.toFixed(0));
// this.UploadPercent = Number(event.percent.toFixed())
// if (this.UploadPercent == 99) {
// // this.dialogVisible = false;
// // this.$refs.upload.clearFiles()
// // this.nowSelectRightData = []
// // this.showProgress = false;
// return
// }
},
// 获取文件列表
onChange(file, fileList) {
onChange (file, fileList) {
// console.log(file.raw, 2222233333)
// 重复文件过滤
let existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name)
if (existFile) {
......@@ -1014,10 +1004,10 @@ export default {
}, 100)
},
// 提交前钩子函数
beforeUpload() {
beforeUpload () {
// //console.log('数据liebiao', this.$refs.upload.uploadFiles)
},
submitUpload() {
submitUpload () {
if (this.nowSelectRightData.length == 0) {
this.$message.error('请选择要上传的文件')
} else {
......@@ -1042,7 +1032,7 @@ export default {
},
// 上传文件函数
upload() {
upload () {
let that = this
// 创建一个空的FormData对象:
const formData = new FormData()
......@@ -1060,144 +1050,53 @@ export default {
this.dialogVisible = true
NetUtil.drFptx.upload(formData, this.drlx, (progressEvent) => {
logger.info('11111111111')
}).then()
that.UploadPercent = Number((((progressEvent.loaded / 10 * 10) / progressEvent.total) * 100).toFixed(2))
}).then(res => {
if (res.code === 0) {
if (this.drlx == 3 || this.drlx == 6) {
this.successCount = res.ret.successCount
this.failCount = res.ret.failCount
this.showProgress = false;
this.checkedTargets = ['1']
this.selectArr = [] // 右边列表
this.datas = []// 左边表格数据项
this.nowSelectData = [] // 左边选中列表数据
this.nowSelectRightData = [] // 右边选中列表数据
this.UploadPercent = 0
} else if (this.drlx == 9) {
this.successCount = res.ret.successCount
this.failCount = res.ret.failCount
this.showProgress = false;
this.selectArr = [] // 右边列表
this.datas = []// 左边表格数据项
this.nowSelectData = [] // 左边选中列表数据
this.nowSelectRightData = [] // 右边选中列表数据
this.checkedTargetsLeft = ['1'] // 选定逻辑库
this.checkedTargetsRight = ['1'] // 选定逻辑库
this.UploadPercent = 0
}
// this.$refs.upload.clearFiles()
this.showProgress = false;
} else {
this.$message.error(res.data.message);
this.dialogVisible = false// 进度条弹窗
this.UploadPercent = 0
}
})
},
// 上传文件函数
// upload () {
// let that = this
// // 创建一个空的FormData对象:
// const formData = new FormData()
// // 可以使用FormData.append来添加键/值对到表单里面；
// this.nowSelectRightData.forEach((file) => {
// formData.append('file', file.raw)
// })
// // 添加自定义参数，不传可删除
// if (this.drlx == 3 || this.drlx == 6) {
// formData.append('logicList', this.logicList)
// } else if (this.drlx == 9) {
// formData.append('logicPsnList', this.logicPsnList)
// formData.append('logicCaseList', this.logicCaseList)
// }
// this.dialogVisible = true;
// // this.$axios({
// // method: 'post',
// // url: this.action,
// // data: formData,
// // loading: false,
// // onUploadProgress: function (progressEvent) {
// // // this.dialogVisible = true;
// // //console.log(progressEvent, 1);
// // that.UploadPercent = Number((((progressEvent.loaded / 10 * 9.9) / progressEvent.total) * 100).toFixed(2))
// // //console.log(that.UploadPercent, 123)
// // // Number(event.percent.toFixed())
// // },
// // }).then(res => {
// // if (res.data.code === 0) {
// // if (this.drlx == 3 || this.drlx == 6) {
// // this.successCount = res.data.ret.successCount
// // this.failCount = res.data.ret.failCount
// // this.showProgress = false;
// // this.selectArr = [] // 右边列表
// // this.datas = []// 左边表格数据项
// // this.nowSelectData = [] // 左边选中列表数据
// // this.nowSelectRightData = [] // 右边选中列表数据
// // this.logicList = [] // 目标逻辑库
// // this.UploadPercent = 0
// // } else if (this.drlx == 9) {
// // this.successCount = res.data.ret.successCount
// // this.failCount = res.data.ret.failCount
// // this.showProgress = false;
// // this.selectArr = [] // 右边列表
// // this.datas = []// 左边表格数据项
// // this.nowSelectData = [] // 左边选中列表数据
// // this.nowSelectRightData = [] // 右边选中列表数据
// // this.UploadPercent = 0
// // }
// // // this.$refs.upload.clearFiles()
// // this.showProgress = false;
// // } else {
// // this.$message.error(res.data.message);
// // this.dialogVisible = false// 进度条弹窗
// // this.UploadPercent = 0
// // }
// // });
// let CancelToken = axios.CancelToken
// let self = this
// axios({
// method: 'post',
// url: this.action,
// data: formData,
// loading: false,
// cancelToken: new CancelToken(function executor (c) {
// self.cancel = c
// console.log(c)
// // 这个参数 c 就是CancelToken构造函数里面自带的取消请求的函数，这里把该函数当参数用
// }),
// headers: {
// Authorization: localStorage.getItem("token"),
// BrowserHeader: 'H5'
// },
// onUploadProgress: function (progressEvent) {
// that.UploadPercent = Number((((progressEvent.loaded / 10 * 10) / progressEvent.total) * 100).toFixed(2))
// },
// }).then(res => {
// if (res.code === 0) {
// if (this.drlx == 3 || this.drlx == 6) {
// this.successCount = res.ret.successCount
// this.failCount = res.ret.failCount
// this.showProgress = false;
// this.checkedTargets = ['1']
// this.selectArr = [] // 右边列表
// this.datas = []// 左边表格数据项
// this.nowSelectData = [] // 左边选中列表数据
// this.nowSelectRightData = [] // 右边选中列表数据
// this.UploadPercent = 0
// } else if (this.drlx == 9) {
// this.successCount = res.ret.successCount
// this.failCount = res.ret.failCount
// this.showProgress = false;
// this.selectArr = [] // 右边列表
// this.datas = []// 左边表格数据项
// this.nowSelectData = [] // 左边选中列表数据
// this.nowSelectRightData = [] // 右边选中列表数据
// this.checkedTargetsLeft = ['1'] // 选定逻辑库
// this.checkedTargetsRight = ['1'] // 选定逻辑库
// this.UploadPercent = 0
// }
// // this.$refs.upload.clearFiles()
// this.showProgress = false;
// } else {
// this.$message.error(res.data.message);
// this.dialogVisible = false// 进度条弹窗
// this.UploadPercent = 0
// }
// });
// //手速够快就不用写这个定时器了，点击取消获取就可以看到效果了
// // setTimeout(function () {
// // //只要我们去调用了这个cancel()方法，没有完成请求的接口便会停止请求
// // self.cancel()
// // }, 1000)
// },
// 删除文件
handleRemove(file, fileList) {
handleRemove (file, fileList) {
//console.log(file, fileList);
},
// 点击文件列表
handlePreview(file) {
handlePreview (file) {
//console.log('上传文件', file);
},
// 上传成功
uploadSuccess(res) {
uploadSuccess (res) {
if (this.drlx == 3 || this.drlx == 6) {
this.successCount = res.ret.successCount
this.failCount = res.ret.failCount
......@@ -1209,14 +1108,14 @@ export default {
this.showProgress = false
},
// 选择上传文件
uploadFile() {
uploadFile () {
// this.$refs.file.dispatchEvent(new MouseEvent("click"));
this.$refs['upload'].$children[0].$refs.input.webkitdirectory = false
this.$refs['upload'].$children[0].$refs.input.accept = '.fptx'
this.$refs['upload'].$children[0].$refs.input.click()
},
// 上传文件夹
uploadFiles() {
uploadFiles () {
// //console.log(this.$refs['upload'].$children[0].$refs.input)
this.$refs['upload'].$children[0].$refs.input.webkitdirectory = true
this.$refs['upload'].$children[0].$refs.input.accept = '.fptx'
......@@ -1230,15 +1129,15 @@ export default {
//console.log(fileDic, 111222)
},
// 表格穿梭框
checkAll1(val) {
checkAll1 (val) {
this.nowSelectData = val
},
checkRightAll(val) {
checkRightAll (val) {
// //console.log('val111', val)
this.nowSelectRightData = val
},
// 选中
handelSelect() {
handelSelect () {
// let self = this
......@@ -1270,17 +1169,17 @@ export default {
this.nowSelectData = []
},
// 取消
handleRemoveSelect() {
handleRemoveSelect () {
this.datas = this.handleConcatArr(this.datas, this.nowSelectRightData)
this.handleRemoveTabList(this.nowSelectRightData, this.selectArr)
this.nowSelectRightData = []
},
handleConcatArr(selectArr, nowSelectData) {
handleConcatArr (selectArr, nowSelectData) {
let arr = []
arr = arr.concat(selectArr, nowSelectData)
return arr
},
handleRemoveTabList(isNeedArr, originalArr) {
handleRemoveTabList (isNeedArr, originalArr) {
if (isNeedArr.length && originalArr.length) {
for (let i = 0; i < isNeedArr.length; i++) {
for (let k = 0; k < originalArr.length; k++) {
......@@ -1293,7 +1192,7 @@ export default {
}
},
filters: {
typeNum(val) {
typeNum (val) {
//console.log(val);
// if (!val) return;
const data = {
......@@ -1306,7 +1205,7 @@ export default {
}
},
computed: {
roleArr() {
roleArr () {
return this.$store.state.layout.Menu
}
},
......@@ -1315,563 +1214,563 @@ export default {
<!--table树-->
<style scoped lang="scss">
/deep/ .children-count {
width: 34px;
font-size: 12px;
text-align: center;
background: #f6f8fa;
border-radius: 11px;
position: absolute;
right: 10px;
top: 50%;
transform: translate(0, -50%);
}
/deep/ .children-count {
width: 34px;
font-size: 12px;
text-align: center;
background: #f6f8fa;
border-radius: 11px;
position: absolute;
right: 10px;
top: 50%;
transform: translate(0, -50%);
}
.el-tree /deep/ .el-tree-node__expand-icon.expanded {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.el-tree /deep/ .el-tree-node__expand-icon.expanded {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
/*有子节点 且未展开*/
.el-table /deep/ .el-icon-arrow-right:before {
content: "";
display: block;
width: 16px;
height: 16px;
font-size: 16px;
background-size: 16px;
}
/*有子节点 且未展开*/
.el-table /deep/ .el-icon-arrow-right:before {
content: "";
display: block;
width: 16px;
height: 16px;
font-size: 16px;
background-size: 16px;
}
/*有子节点 且已展开*/
.el-table /deep/ .el-table__expand-icon--expanded {
.el-icon-arrow-right:before {
content: "";
display: block;
width: 15px;
height: 20px;
font-size: 18px;
background-size: 21px;
}
}
/*有子节点 且已展开*/
.el-table /deep/ .el-table__expand-icon--expanded {
.el-icon-arrow-right:before {
content: "";
display: block;
width: 15px;
height: 20px;
font-size: 18px;
background-size: 21px;
}
}
/*没有子节点*/
.el-tree
/deep/
.el-tree-node__expand-icon.is-leaf::before
.el-table
/deep/
.el-table__placeholder::before {
// background: url("../../icons/tree_f.svg") no-repeat 0 3px;
content: "";
display: block;
width: 16px;
height: 18px;
font-size: 16px;
background-size: 16px;
}
/*没有子节点*/
.el-tree
/deep/
.el-tree-node__expand-icon.is-leaf::before
.el-table
/deep/
.el-table__placeholder::before {
// background: url("../../icons/tree_f.svg") no-repeat 0 3px;
content: "";
display: block;
width: 16px;
height: 18px;
font-size: 16px;
background-size: 16px;
}
/deep/ .el-table--enable-row-hover .el-table__body tr:hover {
cursor: pointer;
}
/deep/ .el-table--enable-row-hover .el-table__body tr:hover {
cursor: pointer;
}
</style>
<style lang="scss">
.el-table__expand-icon {
.el-icon-arrow-right {
cursor: pointer !important;
}
cursor: pointer !important;
position: absolute;
right: 45px;
cursor: pointer;
color: #b51f1f;
transition: transform 0.2s ease-in-out;
width: 11px;
height: 11px;
/* border: black 1px solid; */
margin: 0;
background-image: url("../../assets/img/confirm/expend.png");
background-position: center;
background-size: 11px;
background-repeat: no-repeat;
}
.el-table__expand-icon {
.el-icon-arrow-right {
cursor: pointer !important;
}
cursor: pointer !important;
position: absolute;
right: 45px;
cursor: pointer;
color: #b51f1f;
transition: transform 0.2s ease-in-out;
width: 11px;
height: 11px;
/* border: black 1px solid; */
margin: 0;
background-image: url("../../assets/img/confirm/expend.png");
background-position: center;
background-size: 11px;
background-repeat: no-repeat;
}
.el-table__expand-icon.el-table__expand-icon--expanded {
width: 11px;
height: 11px;
background-image: url("../../assets/img/confirm/shrink.png");
background-position: center;
background-size: 11px;
background-repeat: no-repeat;
transform: rotate(180deg) !important;
}
.el-table__expand-icon.el-table__expand-icon--expanded {
width: 11px;
height: 11px;
background-image: url("../../assets/img/confirm/shrink.png");
background-position: center;
background-size: 11px;
background-repeat: no-repeat;
transform: rotate(180deg) !important;
}
</style>
<style lang="scss" scoped>
// /deep/.el-dialog__wrapper {
// background: rgba($color: #fff, $alpha: 0.65);
// // filter: blur(2px);
// }
/deep/ .el-dialog {
margin-top: 30vh;
.el-button {
width: 96px;
height: 40px;
}
// /deep/.el-dialog__wrapper {
// background: rgba($color: #fff, $alpha: 0.65);
// // filter: blur(2px);
// }
/deep/ .el-dialog {
margin-top: 30vh;
.el-button {
width: 96px;
height: 40px;
}
/deep/ .el-button:focus,
.el-button:hover {
color: #055fe7;
}
}
/deep/ .el-button:focus,
.el-button:hover {
color: #055fe7;
}
}
/deep/ .el-dialog__header {
display: none;
}
/deep/ .el-dialog__header {
display: none;
}
/deep/ .el-dialog__body {
text-align: center;
}
/deep/ .el-dialog__body {
text-align: center;
}
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: #055fe7;
border-color: #055fe7;
}
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: #055fe7;
border-color: #055fe7;
}
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
/deep/ .el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: #055fe7;
border-color: #055fe7;
}
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
/deep/ .el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: #055fe7;
border-color: #055fe7;
}
/deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
color: #333333;
}
/deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
color: #333333;
}
/deep/ .el-table.el-table--fit.el-table--enable-row-hover {
height: 501px !important;
}
/deep/ .el-table.el-table--fit.el-table--enable-row-hover {
height: 501px !important;
}
/deep/ .el-table__body-wrapper.is-scrolling-none {
height: 499px !important;
}
/deep/ .el-table__body-wrapper.is-scrolling-none {
height: 499px !important;
}
.drFPTX {
padding: 25px;
}
.drFPTX {
padding: 25px;
}
.drlx .el-radio {
width: 86px;
height: 32px;
line-height: 32px;
background: #f6f8fa;
border-radius: 2px;
text-align: center;
font-size: 14px;
font-family: MicrosoftYaHei;
margin-right: 25px;
color: #282f3c;
/deep/ .el-radio__label {
padding: 0;
}
/deep/ .el-radio__input.is-checked + .el-radio__label {
color: #055fe7;
}
}
.drlx .el-radio {
width: 86px;
height: 32px;
line-height: 32px;
background: #f6f8fa;
border-radius: 2px;
text-align: center;
font-size: 14px;
font-family: MicrosoftYaHei;
margin-right: 25px;
color: #282f3c;
/deep/ .drlx .is-checked {
background: #ddebff;
}
/deep/ .el-radio__label {
padding: 0;
}
.drlx /deep/ .el-radio__input {
display: none;
}
/deep/ .el-radio__input.is-checked + .el-radio__label {
color: #055fe7;
}
.choose {
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-end;
.wjlx {
display: flex;
width: 609px;
height: 72px;
background: #f6f8fa;
border-radius: 6px;
margin-top: 24px;
}
.left {
width: 242px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
/deep/ .el-radio {
margin-right: 15px;
}
/deep/ .drlx .is-checked {
background: #ddebff;
/deep/ .el-radio__input.is-checked .el-radio__inner {
border-color: #055fe7;
background: #055fe7;
}
.drlx /deep/ .el-radio__input {
display: none;
/deep/ .el-radio__input.is-checked + .el-radio__label {
color: #333;
}
.choose {
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-end;
.wjlx {
display: flex;
width: 609px;
height: 72px;
background: #f6f8fa;
border-radius: 6px;
margin-top: 24px;
}
.right {
display: flex;
justify-content: center;
align-items: center;
.center {
display: flex;
align-items: center;
width: 343px;
// height: 40px;
background: #ffffff;
border-radius: 4px;
border: 1px solid #e6e6e8;
/deep/ .el-input {
width: 282px;
height: 40px;
.el-input__inner {
border: none;
outline: none;
}
}
.left {
width: 242px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.line {
width: 1px;
height: 14px;
background-color: #e6e6e8;
margin-right: 14px;
}
/deep/ .el-radio {
margin-right: 15px;
}
.text {
font-size: 14px;
font-family: MicrosoftYaHei;
color: #006aff;
}
}
}
.el-button {
width: 72px;
height: 32px;
background: #055fe7;
border-color: #055fe7;
border-radius: 4px;
padding: 0;
}
}
/deep/ .el-radio__input.is-checked .el-radio__inner {
border-color: #055fe7;
background: #055fe7;
}
.divider {
width: 100%;
height: 1px;
background: #eeeeee;
margin: 20px 0;
}
/deep/ .el-radio__input.is-checked + .el-radio__label {
color: #333;
}
}
.bottom {
display: flex;
.right {
display: flex;
justify-content: center;
align-items: center;
.center {
display: flex;
align-items: center;
width: 343px;
// height: 40px;
background: #ffffff;
border-radius: 4px;
border: 1px solid #e6e6e8;
/deep/ .el-input {
width: 282px;
height: 40px;
.el-input__inner {
border: none;
outline: none;
}
}
.left {
display: flex;
height: 560px;
width: 1392px;
.line {
width: 1px;
height: 14px;
background-color: #e6e6e8;
margin-right: 14px;
}
.el-col {
.el-table {
height: 550px;
}
.text {
font-size: 14px;
font-family: MicrosoftYaHei;
color: #006aff;
}
}
}
.head {
height: 56px;
width: 100%;
background: #f0f3f6;
border-radius: 7px 7px 0px 0px;
display: flex;
align-items: center;
font-size: 16px;
font-family: MicrosoftYaHei;
color: #282f3c;
.el-button {
width: 72px;
height: 32px;
background: #055fe7;
border-color: #055fe7;
border-radius: 4px;
padding: 0;
div {
width: 4px;
height: 16px;
background: #055fe7;
border-radius: 2px;
margin-left: 10px;
margin-right: 6px;
}
}
/deep/ .el-table tr th {
background-color: #f6f8fa;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #282f3c;
font-weight: 500;
}
}
.divider {
width: 100%;
height: 1px;
background: #eeeeee;
margin: 20px 0;
.el-col-11 {
background: #ffffff;
border-radius: 6px;
border: 1px solid #d1d1d1;
}
.bottom {
display: flex;
.opSetting {
text-align: center;
margin-top: 230px;
.left {
display: flex;
height: 560px;
width: 1392px;
button {
width: 56px;
height: 56px;
background: #f6f8fa;
border-radius: 10px;
.el-col {
.el-table {
height: 550px;
}
color: #333333;
border: none;
}
.head {
height: 56px;
width: 100%;
background: #f0f3f6;
border-radius: 7px 7px 0px 0px;
display: flex;
align-items: center;
font-size: 16px;
font-family: MicrosoftYaHei;
color: #282f3c;
div {
width: 4px;
height: 16px;
background: #055fe7;
border-radius: 2px;
margin-left: 10px;
margin-right: 6px;
}
}
button:hover {
background-color: #055fe7;
color: #ffffff;
}
}
/deep/ .el-table tr th {
background-color: #f6f8fa;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #282f3c;
font-weight: 500;
}
}
.spacing {
margin-top: 22px;
.el-col-11 {
background: #ffffff;
border-radius: 6px;
border: 1px solid #d1d1d1;
}
button {
width: 56px;
height: 56px;
background: #f6f8fa;
border-radius: 10px;
color: #333333;
border-color: #f6f8fa;
}
.opSetting {
text-align: center;
margin-top: 230px;
button:hover {
background-color: #055fe7;
color: #ffffff;
}
}
}
.right {
height: 560px;
width: 161px;
.target {
margin: 0 auto;
width: 137px;
height: 560px;
border-radius: 6px;
border: 1px solid #d1d1d1;
.targetHead {
width: 135px;
height: 56px;
background: #f0f3f6;
border-radius: 6px 6px 0px 0px;
line-height: 56px;
text-align: center;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #333333;
}
button {
width: 56px;
height: 56px;
background: #f6f8fa;
border-radius: 10px;
.targetBody {
overflow: hidden;
padding-top: 16px;
padding-left: 15px;
/deep/ .el-checkbox {
height: 22px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #666666;
line-height: 22px;
margin: 5px 0;
}
}
}
}
}
color: #333333;
border: none;
}
.bdbottom {
display: flex;
button:hover {
background-color: #055fe7;
color: #ffffff;
}
}
.left {
display: flex;
height: 560px;
width: 1240px;
margin-right: 14px;
.spacing {
margin-top: 22px;
.el-col {
.el-table {
height: 550px;
}
button {
width: 56px;
height: 56px;
background: #f6f8fa;
border-radius: 10px;
color: #333333;
border-color: #f6f8fa;
}
.head {
height: 56px;
width: 100%;
background: #f0f3f6;
border-radius: 7px 7px 0px 0px;
display: flex;
align-items: center;
font-size: 16px;
font-family: MicrosoftYaHei;
color: #282f3c;
button:hover {
background-color: #055fe7;
color: #ffffff;
}
}
div {
width: 4px;
height: 16px;
background: #055fe7;
border-radius: 2px;
margin-left: 10px;
margin-right: 6px;
}
}
.right {
height: 560px;
width: 161px;
.target {
margin: 0 auto;
width: 137px;
height: 560px;
border-radius: 6px;
border: 1px solid #d1d1d1;
.targetHead {
width: 135px;
height: 56px;
background: #f0f3f6;
border-radius: 6px 6px 0px 0px;
line-height: 56px;
text-align: center;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #333333;
}
.targetBody {
overflow: hidden;
padding-top: 16px;
padding-left: 15px;
/deep/ .el-checkbox {
height: 22px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #666666;
line-height: 22px;
margin: 5px 0;
}
}
}
}
/deep/ .el-table tr th {
background-color: #f6f8fa;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #282f3c;
font-weight: 500;
}
}
.bdbottom {
display: flex;
.left {
display: flex;
height: 560px;
width: 1240px;
margin-right: 14px;
.el-col {
.el-table {
height: 550px;
}
.el-col-11 {
background: #ffffff;
border-radius: 6px;
border: 1px solid #d1d1d1;
}
.head {
height: 56px;
width: 100%;
background: #f0f3f6;
border-radius: 7px 7px 0px 0px;
display: flex;
align-items: center;
font-size: 16px;
font-family: MicrosoftYaHei;
color: #282f3c;
div {
width: 4px;
height: 16px;
background: #055fe7;
border-radius: 2px;
margin-left: 10px;
margin-right: 6px;
}
}
.opSetting {
text-align: center;
margin-top: 230px;
/deep/ .el-table tr th {
background-color: #f6f8fa;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #282f3c;
font-weight: 500;
}
}
.el-col-11 {
background: #ffffff;
border-radius: 6px;
border: 1px solid #d1d1d1;
}
button {
width: 56px;
height: 56px;
background: #f6f8fa;
border-radius: 10px;
color: #333333;
border: none;
}
.opSetting {
text-align: center;
margin-top: 230px;
button {
width: 56px;
height: 56px;
background: #f6f8fa;
border-radius: 10px;
color: #333333;
border: none;
}
button:hover {
background-color: #055fe7;
color: #ffffff;
}
}
button:hover {
background-color: #055fe7;
color: #ffffff;
}
}
.spacing {
margin-top: 22px;
.spacing {
margin-top: 22px;
button {
width: 56px;
height: 56px;
background: #f6f8fa;
border-radius: 10px;
color: #333333;
border-color: #f6f8fa;
}
button {
width: 56px;
height: 56px;
background: #f6f8fa;
border-radius: 10px;
color: #333333;
border-color: #f6f8fa;
}
button:hover {
background-color: #055fe7;
color: #ffffff;
}
}
}
.right {
height: 560px;
width: 284px;
.head {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
height: 55px;
padding: 0 10px;
box-sizing: border-box;
background: #f0f3f6;
border: 1px solid #d1d1d1;
border-bottom: none;
border-radius: 6px 6px 0px 0px;
div {
width: 1px;
height: 30px;
background: #bfd1eb;
}
}
button:hover {
background-color: #055fe7;
color: #ffffff;
}
}
.bottom {
width: 284px;
height: 500px;
display: flex;
border-radius: 0 0 6px 6px;
border: 1px solid #d1d1d1;
box-sizing: border-box;
border-top: none;
.targetLeft {
flex: 1;
padding-top: 16px;
padding-left: 20px;
/deep/ .el-checkbox {
height: 22px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #666666;
line-height: 22px;
margin: 5px 0;
overflow: hidden;
}
}
.right {
height: 560px;
width: 284px;
.head {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
height: 55px;
padding: 0 10px;
box-sizing: border-box;
background: #f0f3f6;
border: 1px solid #d1d1d1;
border-bottom: none;
border-radius: 6px 6px 0px 0px;
div {
width: 1px;
height: 30px;
background: #bfd1eb;
}
}
.bottom {
width: 284px;
height: 500px;
display: flex;
border-radius: 0 0 6px 6px;
border: 1px solid #d1d1d1;
box-sizing: border-box;
border-top: none;
.targetLeft {
flex: 1;
padding-top: 16px;
padding-left: 20px;
/deep/ .el-checkbox {
height: 22px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #666666;
line-height: 22px;
margin: 5px 0;
overflow: hidden;
}
}
.line {
margin-top: 30px;
width: 1px;
height: 440px;
border: 1px dashed #eeeeee;
}
.line {
margin-top: 30px;
width: 1px;
height: 440px;
border: 1px dashed #eeeeee;
}
.targetRight {
flex: 1;
padding-top: 16px;
padding-left: 20px;
/deep/ .el-checkbox {
height: 22px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #666666;
line-height: 22px;
margin: 5px 0;
overflow: hidden;
}
}
}
.targetRight {
flex: 1;
padding-top: 16px;
padding-left: 20px;
/deep/ .el-checkbox {
height: 22px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #666666;
line-height: 22px;
margin: 5px 0;
overflow: hidden;
}
}
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment