XCKJ
/
hir_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

用户列表修改
continuous-integration/drone/push Build is passing Details

main
wangxiaoshuang 2025-08-26 13:13:09 +08:00
parent 9cdfb65a7b
commit 4fedec105f
15 changed files with 524 additions and 420 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

176
src/components/BaseForm/search-form.vue
View File

@ -1,158 +1,68 @@
<!-- 搜索表单 --> <!-- 搜索表单 -->
<template> <template>
<div class="base-search-form"> <div class="base-search-form">
<el-form :size="size" :inline="true" :label-width="labelWidth"> <el-form :inline="true" :label-width="labelWidth">
<el-form-item <el-form-item v-for="item in searchForm" :key="item.prop" :label="item.label">
v-for="item in searchForm"
:key="item.prop"
:label="item.label"
>
<!-- 输入框 --> <!-- 输入框 -->
<el-input <el-input v-if="item.type === 'Input'" v-model="searchData[item.prop]" :placeholder="item.placeholder"
v-if="item.type === 'Input'" size="mini" clearable :style="{ width: item.width }" :readonly="item.readonly" />
v-model="searchData[item.prop]"
:placeholder="item.placeholder"
size="mini"
:style="{ width: item.width }"
:readonly="item.readonly"
clearable
/>
<!-- 下拉框 --> <!-- 下拉框 -->
<el-select <el-select v-if="item.type === 'Select'" v-model="searchData[item.prop]" :placeholder="item.placeholder"
v-if="item.type === 'Select'" size="mini" clearable :style="{ width: item.width }"
v-model="searchData[item.prop]" @change="item.change && item.change(that, searchData[item.prop])">
:placeholder="item.placeholder" <el-option v-for="op in item.options" :key="op[item.props['label']]" :label="op[item.props['label']]"
size="mini" :value="op[item.props['value']]" />
clearable
:style="{ width: item.width }"
@change="item.change && item.change(that, searchData[item.prop])"
>
<el-option
v-for="op in item.options"
:key="op[item.props['label']]"
:label="op[item.props['label']]"
:value="op[item.props['value']]"
/>
</el-select> </el-select>
<el-select <el-select v-if="item.type === 'Select2'" v-model="searchData[item.prop]" :placeholder="item.placeholder"
v-if="item.type === 'Select2'" size="mini" clearable :style="{ width: item.width }"
v-model="searchData[item.prop]" @change="item.change && item.change(that, searchData[item.prop])">
:placeholder="item.placeholder" <el-option v-for="(key, value) of item.options" :key="key" :label="key" :value="value" />
size="mini"
clearable
:style="{ width: item.width }"
@change="item.change && item.change(that, searchData[item.prop])"
>
<el-option
v-for="(key, value) of item.options"
:key="key"
:label="key"
:value="value"
/>
</el-select> </el-select>
<!-- 单选 --> <!-- 单选 -->
<el-radio-group <el-radio-group v-if="item.type === 'Radio'" v-model="searchData[item.prop]" :style="{ width: item.width }">
v-if="item.type === 'Radio'" <el-radio v-for="ra in item.radios" :key="ra.value" :label="ra.value">{{ ra.label }}</el-radio>
v-model="searchData[item.prop]"
:style="{ width: item.width }"
>
<el-radio
v-for="ra in item.radios"
:key="ra.value"
:label="ra.value"
>{{ ra.label }}</el-radio
>
</el-radio-group> </el-radio-group>
<!-- 单选按钮 --> <!-- 单选按钮 -->
<el-radio-group <el-radio-group v-if="item.type === 'RadioButton'" v-model="searchData[item.prop]"
v-if="item.type === 'RadioButton'" :style="{ width: item.width }" @change="item.change && item.change(searchData[item.prop])">
v-model="searchData[item.prop]" <el-radio-button v-for="ra in item.radios" :key="ra.value" :label="ra.value">{{ ra.label }}</el-radio-button>
:style="{ width: item.width }"
@change="item.change && item.change(searchData[item.prop])"
>
<el-radio-button
v-for="ra in item.radios"
:key="ra.value"
:label="ra.value"
>{{ ra.label }}</el-radio-button
>
</el-radio-group> </el-radio-group>
<!-- 复选框 --> <!-- 复选框 -->
<el-checkbox-group <el-checkbox-group v-if="item.type === 'Checkbox'" v-model="searchData[item.prop]"
v-if="item.type === 'Checkbox'" :style="{ width: item.width }">
v-model="searchData[item.prop]" <el-checkbox v-for="ch in item.checkboxs" :key="ch.value" :label="ch.value">{{ ch.label }}</el-checkbox>
:style="{ width: item.width }"
>
<el-checkbox
v-for="ch in item.checkboxs"
:key="ch.value"
:label="ch.value"
>{{ ch.label }}</el-checkbox
>
</el-checkbox-group> </el-checkbox-group>
<!-- 日期 --> <!-- 日期 -->
<el-date-picker <el-date-picker v-if="item.type === 'Date'" v-model="searchData[item.prop]" :placeholder="item.placeholder"
v-if="item.type === 'Date'" :style="{ width: item.width }" value-format="yyyy-MM-dd" format="yyyy-MM-dd"
v-model="searchData[item.prop]" :picker-options="item.pickerOption" clearable />
:placeholder="item.placeholder"
:style="{ width: item.width }"
value-format="yyyy-MM-dd"
format="yyyy-MM-dd"
:picker-options="item.pickerOption"
clearable
/>
<!-- 时间 --> <!-- 时间 -->
<el-time-select <el-time-select v-if="item.type === 'Time'" v-model="searchData[item.prop]" :placeholder="item.placeholder"
v-if="item.type === 'Time'" type="" :style="{ width: item.width }" clearable />
v-model="searchData[item.prop]"
:placeholder="item.placeholder"
type=""
:style="{ width: item.width }"
clearable
/>
<!-- 日期时间 --> <!-- 日期时间 -->
<el-date-picker <el-date-picker v-if="item.type === 'DateTime'" v-model="searchData[item.prop]" :placeholder="item.placeholder"
v-if="item.type === 'DateTime'" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
v-model="searchData[item.prop]" :disabled="item.disable && item.disable(searchData[item.prop])" :style="{ width: item.width }" clearable />
:placeholder="item.placeholder"
type="datetime"
:disabled="item.disable && item.disable(searchData[item.prop])"
:style="{ width: item.width }"
clearable
/>
<!-- 日期时间段 --> <!-- 日期时间段 -->
<el-date-picker <el-date-picker v-if="item.type === 'Daterange'" v-model="searchData[item.prop]" type="datetimerange"
v-if="item.type === 'Daterange'" :default-time="['00:00:00', '23:59:59']" :range-separator="$t('baseForm:daterange:rangeSeparator')"
v-model="searchData[item.prop]" :start-placeholder="$t('baseForm:daterange:startPlaceholder')"
type="datetimerange" :end-placeholder="$t('baseForm:daterange:startendPlaceholder')" value-format="yyyy-MM-dd HH:mm:ss"
range-separator="-" format="yyyy-MM-dd HH:mm:ss" :style="{ width: item.width }" clearable />
:start-placeholder="$t('trials:uploadClinicalData:table:beginDate')"
:end-placeholder="$t('trials:uploadClinicalData:table:endDate')"
:style="{ width: item.width }"
clearable
/>
<!-- 滑块 --> <!-- 滑块 -->
<!-- <el-slider v-if="item.type==='Slider'" v-model="searchData[item.prop]"></el-slider> --> <!-- <el-slider v-if="item.type==='Slider'" v-model="searchData[item.prop]"></el-slider> -->
<!-- 开关 --> <!-- 开关 -->
<el-switch <el-switch v-if="item.type === 'Switch'" v-model="searchData[item.prop]" :style="{ width: item.width }" />
v-if="item.type === 'Switch'"
v-model="searchData[item.prop]"
:style="{ width: item.width }"
/>
<!-- 具名slot --> <!-- 具名slot -->
<slot v-if="item.type === 'Custom'" :name="item.slot" /> <slot v-if="item.type === 'Custom'" :name="item.slot" />
</el-form-item> </el-form-item>
<div style="display: inline-block;width: fit-content;">
<el-form-item v-for="item in searchHandle" :key="item.label"> <el-form-item v-for="item in searchHandle" :key="item.label">
<slot v-if="item.slot" :name="item.slot" /> <slot v-if="item.slot" :name="item.slot" />
<el-button <el-button v-else :type="item.type" :icon="item.icon || ''" @click="handleClick(item.emitKey)">{{ item.label
v-else }}</el-button>
:type="item.type"
:size="item.size || size"
:icon="item.icon || ''"
@click="handleClick(item.emitKey)"
>{{ item.label }}</el-button
>
</el-form-item> </el-form-item>
</div>
</el-form> </el-form>
</div> </div>
</template> </template>
@ -170,11 +80,11 @@ export default {
}, },
labelWidth: { labelWidth: {
type: String, type: String,
default: "", default: '',
}, },
size: { size: {
type: String, type: String,
default: "mini", default: 'mini',
}, },
searchForm: { searchForm: {
type: Array, type: Array,
@ -192,10 +102,10 @@ export default {
methods: { methods: {
handleClick(emitKey) { handleClick(emitKey) {
// emit事件 // emit事件
this.$emit(`${emitKey}`); this.$emit(`${emitKey}`)
}, },
}, },
}; }
</script> </script>
<style lang="scss"> <style lang="scss">
.base-search-form { .base-search-form {

68
src/components/BaseTable/index.vue
View File

@ -1,29 +1,31 @@
<template> <template>
<el-row> <el-row>
<el-col class="m-b-10" :span="24"> <el-col class="m-b-10" :span="24">
<el-table <el-table v-adaptive="{ bottomOffset }" :data="list" height="100" v-bind="$attrs" stripe
v-adaptive="{bottomOffset}" :highlight-current-row="highlightCurrentRow" @selection-change="handleSelectionChange"
:data="list" @sort-change="sortByColumn" @select="handleSelect" @cell-dblclick="celldblclick">
:height="tableHeight"
v-bind="$attrs"
stripe
:highlight-current-row="highlightCurrentRow"
@selection-change="handleSelectionChange"
@sort-change="sortByColumn"
@select="handleSelect"
@cell-dblclick="celldblclick"
>
<template v-for="(column, index) in columns"> <template v-for="(column, index) in columns">
<slot name="front-slot" /> <slot name="front-slot" />
<el-table-column v-if="column.type === 'tip'" :key="index" width="35">
<template slot-scope="scope">
<span v-if="column.slot">
<!-- 具名slot -->
<slot v-if="column.slot" :name="column.slot" :scope="scope" />
</span>
</template>
</el-table-column>
<!-- 序号 --> <!-- 序号 -->
<el-table-column v-if="column.type === 'selection'" :key="index" type="selection" width="55" /> <el-table-column v-else-if="column.type === 'selection'" :key="index" type="selection" width="55" />
<!-- 复选框 --> <!-- 复选框 -->
<el-table-column v-else-if="column.type === 'index'" :key="index" type="index" width="50" /> <el-table-column v-else-if="column.type === 'index'" :key="index" type="index" width="50" />
<!-- 具体内容 --> <!-- 具体内容 -->
<el-table-column v-else :key="index" align="left" :label="column.label" :width="column.width" :min-width="column.minWidth" :show-overflow-tooltip="column.showOverflowTooltip || false" :sortable="column.sortable || false" :prop="column.prop"> <el-table-column v-else :key="index" align="left" :label="column.label" :width="column.width"
:min-width="column.minWidth" :show-overflow-tooltip="column.showOverflowTooltip || false"
:sortable="column.sortable || false" :prop="column.prop" :fixed="column.fixed">
<template slot-scope="scope"> <template slot-scope="scope">
<!-- 仅仅显示文字 --> <!-- 仅仅显示文字 -->
<span v-if="!column.hidden"> <!-- 如果hidden为true的时候 那么当前格可以不显示，可以选择显示自定义的slot--> <span v-if="!column.hidden">
<!-- 如果hidden为true的时候 那么当前格可以不显示，可以选择显示自定义的slot-->
<!-- 操作按钮 --> <!-- 操作按钮 -->
<span v-if="column.type === 'operate'"> <span v-if="column.type === 'operate'">
<!-- <a v-for="(operate, i) in column.operates" :key="i" href="javascript:void(0)" class="operate-button" @click="handleClick(operate, scope.row)"> <!-- <a v-for="(operate, i) in column.operates" :key="i" href="javascript:void(0)" class="operate-button" @click="handleClick(operate, scope.row)">
@ -31,7 +33,11 @@
&nbsp;&nbsp; &nbsp;&nbsp;
</a> --> </a> -->
<span v-for="(operate, i) in column.operates" :key="i"> <span v-for="(operate, i) in column.operates" :key="i">
<el-button :size="operate.size || 'mini'" :type="operate.type || 'primary'" style="margin-right:5px;" @click="handleClick(operate, scope.row)">{{ operate.name }}</el-button> <el-button :type="operate.type || 'primary'" v-if="
(operate.show && scope.row[operate.show]) ||
!operate.show
" style="margin-right: 5px" @click="handleClick(operate, scope.row)">{{ operate.name
}}</el-button>
</span> </span>
</span> </span>
<span v-else> <span v-else>
@ -52,7 +58,8 @@
</el-col> </el-col>
<!-- 分页部分 --> <!-- 分页部分 -->
<el-col v-if="!hiddenPage" :span="24" class="page"> <el-col v-if="!hiddenPage" :span="24" class="page">
<pagination :total="total" :page.sync="searchData.PageIndex" :limit.sync="searchData.PageSize" @pagination="pagination" /> <pagination :total="total" :page.sync="searchData.PageIndex" :limit.sync="searchData.PageSize"
@pagination="pagination" />
</el-col> </el-col>
</el-row> </el-row>
</template> </template>
@ -96,45 +103,44 @@ export default {
// 核心数据 // 核心数据
list: { list: {
type: Array, type: Array,
default: () => [] default: () => [],
}, },
// columns // columns
columns: { columns: {
type: Array, type: Array,
required: true, required: true,
default: () => [] default: () => [],
}, },
// is hidden page for table // is hidden page for table
hiddenPage: { hiddenPage: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
bottomOffset: { bottomOffset: {
type: Number, type: Number,
default: 45 default: 45,
}, },
searchData: { searchData: {
type: Object, type: Object,
default: () => {} default: () => { },
}, },
total: { total: {
type: Number, type: Number,
default: 0 default: 0,
}, },
highlightCurrentRow: { highlightCurrentRow: {
type: Boolean, type: Boolean,
default: false default: false,
} },
}, },
data() { data() {
return { return {}
}
}, },
computed: { computed: {
tableHeight() { tableHeight() {
return 100 return '100'
} },
}, },
methods: { methods: {
// 处理点击事件 // 处理点击事件
@ -157,8 +163,8 @@ export default {
}, },
pagination() { pagination() {
this.$emit('getList') this.$emit('getList')
} },
} },
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

6
src/directive/adaptive/adaptive.js
View File

@ -9,16 +9,16 @@ const doResize = async (el, binding, vnode) => {
const { componentInstance: $table } = await vnode const { componentInstance: $table } = await vnode
// 获取调用传递过来的数据 // 获取调用传递过来的数据
const { value } = binding const { value } = binding
if (value && value.notAdaptive) return;
// 获取距底部距离（用于展示页码等信息） // 获取距底部距离（用于展示页码等信息）
const bottomOffset = (value && value.bottomOffset) || 40 const bottomOffset = (value && value.bottomOffset) || 40
if (!$table) return if (!$table) return
// 计算列表高度并设置 // 计算列表高度并设置
const height = window.innerHeight - el.getBoundingClientRect().top - bottomOffset const height = window.innerHeight - el.getBoundingClientRect().top - bottomOffset
// $table.layout.setMaxHeight(height) bodyHeight // $table.layout.setMaxHeight(height)
$table.layout.setHeight(height) $table.layout.setHeight(height)
// $table.bodyWrapper.style.cssText = `height:${$table.layout.bodyHeight - 20}px`
// $table.maxHeight = height // $table.maxHeight = height
let timer = setTimeout(() => { $table.doLayout(); timer = null; }, 500) $table.doLayout()
} }
export default { export default {

4
src/directive/dialogDrag.js
View File

@ -47,8 +47,10 @@ const dialogDrag = Vue.directive('dialogDrag', {
styL = +styL.replace(/\px/g, '') styL = +styL.replace(/\px/g, '')
styT = +styT.replace(/\px/g, '') styT = +styT.replace(/\px/g, '')
} }
const oldMousemove = document.onmousemove
document.onmousemove = function (e) { document.onmousemove = function (e) {
oldMousemove(e)
// 通过事件委托，计算移动的距离 // 通过事件委托，计算移动的距离
let left = e.clientX - disX let left = e.clientX - disX
const top = e.clientY - disY const top = e.clientY - disY
@ -71,7 +73,7 @@ const dialogDrag = Vue.directive('dialogDrag', {
} }
document.onmouseup = function (e) { document.onmouseup = function (e) {
document.onmousemove = null document.onmousemove = oldMousemove
document.onmouseup = null document.onmouseup = null
} }
} }

4
src/styles/element-ui.scss
View File

@ -47,3 +47,7 @@
.el-range-separator { .el-range-separator {
box-sizing: content-box; box-sizing: content-box;
} }
.el-select-dropdown__wrap {
max-height: 350px;
}

82
src/styles/index.scss
View File

@ -52,6 +52,7 @@ a:hover {
div:focus { div:focus {
outline: none; outline: none;
} }
body .el-table th.gutter { body .el-table th.gutter {
display: table-cell !important; display: table-cell !important;
} }
@ -66,6 +67,13 @@ body .el-table th.gutter {
height: 0; height: 0;
} }
} }
.text-ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.el-loading-mask { .el-loading-mask {
background-color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5);
} }
@ -80,6 +88,7 @@ body .el-table th.gutter {
.table-container { .table-container {
height: calc(100% - 100px); height: calc(100% - 100px);
} }
// .pagination-container{ // .pagination-container{
// text-align: right; // text-align: right;
// } // }
@ -92,10 +101,12 @@ body .el-table th.gutter {
border-left: 3px solid #0fc8e0; border-left: 3px solid #0fc8e0;
font-size: 13px; font-size: 13px;
margin-bottom: 10px; margin-bottom: 10px;
p { p {
margin: 0; margin: 0;
padding-left: 5px; padding-left: 5px;
} }
.add { .add {
position: absolute; position: absolute;
right: 10px; right: 10px;
@ -104,9 +115,11 @@ body .el-table th.gutter {
margin-top: -15px; margin-top: -15px;
} }
} }
.el-dialog__body { .el-dialog__body {
padding: 0 10px; padding: 0 10px;
} }
.el-date-editor.el-input, .el-date-editor.el-input,
.el-date-editor.el-input__inner, .el-date-editor.el-input__inner,
.el-select { .el-select {
@ -114,17 +127,21 @@ body .el-table th.gutter {
} }
} }
} }
.data-list { .data-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
.toolbar { .toolbar {
display: flex; display: flex;
} }
.data-table { .data-table {
flex: 1; flex: 1;
padding: 5px 0px; padding: 5px 0px;
} }
.pagination { .pagination {
height: 32px; height: 32px;
text-align: right; text-align: right;
@ -136,18 +153,23 @@ body .el-table th.gutter {
top: 10px; top: 10px;
font-size: 30px; font-size: 30px;
} }
.el-dialog__body { .el-dialog__body {
margin-top: 15px;
height: calc(100% - 70px); height: calc(100% - 70px);
padding: 0 20px; padding: 0 20px;
.base-modal-body { .base-modal-body {
padding: 10px 20px; padding: 10px 20px;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
} }
} }
.el-dialog__footer { .el-dialog__footer {
padding: 10px; padding: 10px;
} }
.link-breadcrumb { .link-breadcrumb {
cursor: pointer; cursor: pointer;
color: #428bca; color: #428bca;
@ -158,123 +180,181 @@ body .el-table th.gutter {
.el-dialog__header { .el-dialog__header {
padding: 15px; padding: 15px;
} }
.base-dialog-body { .base-dialog-body {
border: 1px solid #e0e0e0; border: 1px solid #e0e0e0;
padding: 10px; padding: 10px;
max-height: 600px; max-height: 600px;
overflow-y: auto; overflow-y: auto;
} }
.base-dialog-footer { .base-dialog-footer {
text-align: right; text-align: right;
margin-top: 10px; margin-top: 10px;
} }
.el-dialog__body { .el-dialog__body {
padding: 10px; padding: 10px;
} }
.el-dialog__footer { .el-dialog__footer {
padding: 10px; padding: 10px;
} }
} }
.el-descriptions { .el-descriptions {
box-sizing: border-box; box-sizing: border-box;
font-size: 14px; font-size: 14px;
color: #303133 color: #303133
} }
.el-descriptions__header { .el-descriptions__header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 20px margin-bottom: 20px
} }
.el-descriptions__title { .el-descriptions__title {
font-size: 16px; font-size: 16px;
font-weight: 700 font-weight: 700
} }
.el-descriptions__body { .el-descriptions__body {
color: #606266; color: #606266;
background-color: #fff background-color: #fff
} }
.el-descriptions__body .el-descriptions__table { .el-descriptions__body .el-descriptions__table {
border-collapse: collapse; border-collapse: collapse;
width: 100%; width: 100%;
table-layout: fixed table-layout: fixed
} }
.el-descriptions__body .el-descriptions__table .el-descriptions-item__cell { .el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
box-sizing: border-box; box-sizing: border-box;
text-align: left; text-align: left;
font-weight: 400; font-weight: 400;
line-height: 1.5 line-height: 1.5
} }
.el-descriptions__body .el-descriptions__table .el-descriptions-item__cell.is-left { .el-descriptions__body .el-descriptions__table .el-descriptions-item__cell.is-left {
text-align: left text-align: left
} }
.el-descriptions__body .el-descriptions__table .el-descriptions-item__cell.is-center { .el-descriptions__body .el-descriptions__table .el-descriptions-item__cell.is-center {
text-align: center text-align: center
} }
.el-descriptions__body .el-descriptions__table .el-descriptions-item__cell.is-right { .el-descriptions__body .el-descriptions__table .el-descriptions-item__cell.is-right {
text-align: right text-align: right
} }
.el-descriptions .is-bordered { .el-descriptions .is-bordered {
table-layout: auto table-layout: auto
} }
.el-descriptions .is-bordered .el-descriptions-item__cell { .el-descriptions .is-bordered .el-descriptions-item__cell {
border: 1px solid #ebeef5; border: 1px solid #ebeef5;
padding: 12px 10px padding: 12px 10px
} }
.el-descriptions :not(.is-bordered) .el-descriptions-item__cell { .el-descriptions :not(.is-bordered) .el-descriptions-item__cell {
padding-bottom: 12px padding-bottom: 12px
} }
.el-descriptions--medium.is-bordered .el-descriptions-item__cell { .el-descriptions--medium.is-bordered .el-descriptions-item__cell {
padding: 10px padding: 10px
} }
.el-descriptions--medium:not(.is-bordered) .el-descriptions-item__cell { .el-descriptions--medium:not(.is-bordered) .el-descriptions-item__cell {
padding-bottom: 10px padding-bottom: 10px
} }
.el-descriptions--small { .el-descriptions--small {
font-size: 12px font-size: 12px
} }
.el-descriptions--small.is-bordered .el-descriptions-item__cell { .el-descriptions--small.is-bordered .el-descriptions-item__cell {
padding: 8px 10px padding: 8px 10px
} }
.el-descriptions--small:not(.is-bordered) .el-descriptions-item__cell { .el-descriptions--small:not(.is-bordered) .el-descriptions-item__cell {
padding-bottom: 8px padding-bottom: 8px
} }
.el-descriptions--mini { .el-descriptions--mini {
font-size: 12px font-size: 12px
} }
.el-descriptions--mini.is-bordered .el-descriptions-item__cell { .el-descriptions--mini.is-bordered .el-descriptions-item__cell {
padding: 6px 10px padding: 6px 10px
} }
.el-descriptions--mini:not(.is-bordered) .el-descriptions-item__cell { .el-descriptions--mini:not(.is-bordered) .el-descriptions-item__cell {
padding-bottom: 6px padding-bottom: 6px
} }
.el-descriptions-item { .el-descriptions-item {
vertical-align: top vertical-align: top
} }
.el-descriptions-item__container { .el-descriptions-item__container {
display: flex display: flex
} }
.el-descriptions-item__container .el-descriptions-item__content,.el-descriptions-item__container .el-descriptions-item__label{
.el-descriptions-item__container .el-descriptions-item__content,
.el-descriptions-item__container .el-descriptions-item__label {
display: inline-flex; display: inline-flex;
align-items: baseline align-items: baseline
} }
.el-descriptions-item__container .el-descriptions-item__content { .el-descriptions-item__container .el-descriptions-item__content {
flex: 1 flex: 1
} }
.el-descriptions-item__label.has-colon:after { .el-descriptions-item__label.has-colon:after {
content: ":"; content: ":";
position: relative; position: relative;
top: -.5px top: -.5px
} }
.el-descriptions-item__label.is-bordered-label { .el-descriptions-item__label.is-bordered-label {
font-weight: 700; font-weight: 700;
color: #909399; color: #909399;
background: #fafafa background: #fafafa
} }
.el-descriptions-item__label:not(.is-bordered-label) { .el-descriptions-item__label:not(.is-bordered-label) {
margin-right: 10px margin-right: 10px
} }
.el-descriptions-item__content { .el-descriptions-item__content {
word-break: break-word; word-break: break-word;
overflow-wrap: break-word overflow-wrap: break-word
} }
.feedBack-box {
.el-dialog__wrapper {
z-index: 3999 !important;
}
}
.feedBack-select-box {
z-index: 4000 !important;
}
.feedBack-box-modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: .5;
background: #000;
z-index: 3999;
}
.el-message-box__wrapper {
z-index: 9999 !important;
}

30
src/styles/sidebar.scss
View File

@ -8,6 +8,7 @@ $menuHover:#dfdede;
$subMenuBg: #e4e4e4; $subMenuBg: #e4e4e4;
$subMenuHover: #dfdede; $subMenuHover: #dfdede;
$sideBarWidth: 200px; $sideBarWidth: 200px;
#app { #app {
.main-container { .main-container {
@ -71,13 +72,17 @@ $sideBarWidth: 200px;
border: none; border: none;
height: 100%; height: 100%;
width: 100% !important; width: 100% !important;
background-color: $menuBg;
} }
// menu hover // menu hover
.submenu-title-noDropdown, .submenu-title-noDropdown,
.el-submenu__title { .el-submenu__title {
color: $menuText !important;
&:hover { &:hover {
background-color: $menuHover !important; background-color: $menuHover !important;
color: $menuActiveText !important;
} }
} }
@ -85,15 +90,36 @@ $sideBarWidth: 200px;
color: $subMenuActiveText !important; color: $subMenuActiveText !important;
} }
& .nest-menu .el-submenu>.el-submenu__title, .el-menu-item {
& .el-submenu .el-menu-item { color: $menuText !important;
}
.el-menu-item:focus,
.el-menu-item:hover {
background-color: $subMenuBg !important;
color: $menuActiveText !important;
}
.el-submenu .el-menu-item {
min-width: $sideBarWidth !important; min-width: $sideBarWidth !important;
background-color: $subMenuBg !important; background-color: $subMenuBg !important;
&:hover { &:hover {
background-color: $subMenuHover !important; background-color: $subMenuHover !important;
} }
} }
// &.nest-menu .el-submenu>.el-submenu__title,
// &.el-submenu .el-menu-item {
// min-width: $sideBarWidth !important;
// background-color: $subMenuBg !important;
// &:hover {
// background-color: $subMenuHover !important;
// }
// }
} }
.hideSidebar { .hideSidebar {

5
src/utils/dialog.js
View File

@ -40,8 +40,9 @@ Vue.directive('dialogDrag', {
styL = +styL.replace(/\px/g, '') styL = +styL.replace(/\px/g, '')
styT = +styT.replace(/\px/g, '') styT = +styT.replace(/\px/g, '')
} }
const oldMousemove = document.onmousemove
document.onmousemove = function (e) { document.onmousemove = function (e) {
oldMousemove(e)
// 通过事件委托，计算移动的距离 // 通过事件委托，计算移动的距离
let left = e.clientX - disX let left = e.clientX - disX
let top = e.clientY - disY let top = e.clientY - disY
@ -63,7 +64,7 @@ Vue.directive('dialogDrag', {
} }
document.onmouseup = function (e) { document.onmouseup = function (e) {
document.onmousemove = null document.onmousemove = oldMousemove
document.onmouseup = null document.onmouseup = null
} }
return false return false

1
src/utils/splitScreen.js
View File

@ -3,6 +3,7 @@ async function queryWindowManagement() {
} }
async function getPermission() { async function getPermission() {
const permission = await queryWindowManagement(); const permission = await queryWindowManagement();
console.log(permission.state, 'permission.state')
if (permission.state === "granted") { // 已经授权 if (permission.state === "granted") { // 已经授权
return true return true
} else if (permission.state === "prompt") { // 询问是否授权 } else if (permission.state === "prompt") { // 询问是否授权

318
src/views/system/user/list/index.vue
View File

@ -7,8 +7,19 @@
<base-table v-loading="loading" :columns="columns" :list="users" :search-data="searchData" :total="total" <base-table v-loading="loading" :columns="columns" :list="users" :search-data="searchData" :total="total"
@getList="getList" @editCb="handleEditUser" @deleteCb="handleDeleteUser" @sortByColumn="sortByColumn"> @getList="getList" @editCb="handleEditUser" @deleteCb="handleDeleteUser" @sortByColumn="sortByColumn">
<!-- 选择自定义slot --> <!-- 选择自定义slot -->
<template slot="tip-slot" slot-scope="{ scope }">
<i v-if="
diffTime(scope.row.LastLoginTime) >= 90 &&
diffTime(scope.row.LastChangePassWordTime) >= 90
" class="el-icon-warning" style="color: #f56c6c"
:title="$t('system:userlist:tip:overTimeAndoverTimePassWord')" />
<i v-else-if="diffTime(scope.row.LastLoginTime) >= 90" class="el-icon-warning" style="color: #f56c6c"
:title="$t('system:userlist:tip:overTime')" />
<i v-else-if="diffTime(scope.row.LastChangePassWordTime) >= 90" class="el-icon-warning" style="color: #f56c6c"
:title="$t('system:userlist:tip:overTimePassWord')" />
</template>
<template slot="genderSlot" slot-scope="{ scope }"> <template slot="genderSlot" slot-scope="{ scope }">
{{ scope.row.Sex ? "Male" : "Female" }} {{ scope.row.Sex ? 'Male' : 'Female' }}
</template> </template>
<template slot="UserTypeSlot" slot-scope="{ scope }"> <template slot="UserTypeSlot" slot-scope="{ scope }">
{{ {{
@ -21,27 +32,27 @@
}} }}
</template> </template>
<template slot="roleSlot" slot-scope="{ scope }"> <template slot="roleSlot" slot-scope="{ scope }">
{{scope.row.RoleNameList.map((role) => role.RoleName).join(",")}} {{scope.row.RoleNameList.map((role) => role.RoleName).join(', ')}}
</template> </template>
<template slot="isZhiZhunSlot" slot-scope="{ scope }"> <template slot="isZhiZhunSlot" slot-scope="{ scope }">
{{ {{
scope.row.IsZhiZhun scope.row.IsZhiZhun
? $t("system:userlist:table:InternalOrExternal:Internal") ? $t('system:userlist:table:InternalOrExternal:Internal')
: $t("system:userlist:table:InternalOrExternal:External") : $t('system:userlist:table:InternalOrExternal:External')
}} }}
</template> </template>
<template slot="isTestUserSlot" slot-scope="{ scope }"> <template slot="isTestUserSlot" slot-scope="{ scope }">
{{ {{
scope.row.IsTestUser scope.row.IsTestUser
? $t("system:userlist:table:IsTestUser:Yes") ? $t('system:userlist:table:IsTestUser:Yes')
: $t("system:userlist:table:IsTestUser:No") : $t('system:userlist:table:IsTestUser:No')
}} }}
</template> </template>
<template slot="statusSlot" slot-scope="{ scope }"> <template slot="statusSlot" slot-scope="{ scope }">
{{ {{
scope.row.Status scope.row.Status
? $t("system:userlist:table:Status:Enable") ? $t('system:userlist:table:Status:Enable')
: $t("system:userlist:table:Status:Disable") : $t('system:userlist:table:Status:Disable')
}} }}
</template> </template>
</base-table> </base-table>
@ -54,7 +65,7 @@ import BoxContent from "@/components/BoxContent";
import SearchForm from "@/components/BaseForm/search-form"; import SearchForm from "@/components/BaseForm/search-form";
import BaseTable from "@/components/BaseTable"; import BaseTable from "@/components/BaseTable";
import tableMixins from "@/mixins/table"; import tableMixins from "@/mixins/table";
import moment from 'moment'
// 用户列表查询表单配置信息 // 用户列表查询表单配置信息
// 用户列表查询表单事件配置信息 // 用户列表查询表单事件配置信息
const searchDataDefault = () => { const searchDataDefault = () => {
@ -83,215 +94,275 @@ export default {
return { return {
searchData: searchDataDefault(), searchData: searchDataDefault(),
columns: [ columns: [
{ type: "index" }, { type: 'tip', slot: 'tip-slot' },
{ type: 'index' },
{ {
prop: "UserCode", prop: 'UserCode',
label: this.$t("system:userlist:table:S/N"), label: this.$t('system:userlist:table:S/N'),
width: 100, width: 100,
sortable: "custom", sortable: 'custom',
showOverflowTooltip: true, showOverflowTooltip: true,
}, },
{ {
prop: "UserName", prop: 'UserName',
label: this.$t("system:userlist:table:UserName"), label: this.$t('system:userlist:table:UserName'),
minWidth: 100, minWidth: 100,
sortable: "custom", sortable: 'custom',
showOverflowTooltip: true, showOverflowTooltip: true,
}, },
{ {
prop: "RealName", prop: 'FullName',
label: this.$t("system:userlist:table:RealName"), label: this.$t('system:userlist:table:RealName'),
minWidth: 120, minWidth: 120,
sortable: "custom", sortable: 'custom',
showOverflowTooltip: true, showOverflowTooltip: true,
}, },
// {
// prop: 'Sex',
// label: this.$t('system:userlist:table:Gender'),
// hidden: true,
// slot: 'genderSlot',
// minWidth: 100,
// sortable: 'custom',
// showOverflowTooltip: true
// },
{ {
prop: "Sex", prop: 'Phone',
label: this.$t("system:userlist:table:Gender"), label: this.$t('system:userlist:table:Phone'),
hidden: true,
slot: "genderSlot",
minWidth: 100,
sortable: "custom",
showOverflowTooltip: true,
},
{
prop: "Phone",
label: this.$t("system:userlist:table:Phone"),
minWidth: 120, minWidth: 120,
sortable: "custom", sortable: 'custom',
showOverflowTooltip: true, showOverflowTooltip: true,
}, },
{ {
prop: "EMail", prop: 'EMail',
label: this.$t("system:userlist:table:Email"), label: this.$t('system:userlist:table:Email'),
minWidth: 150, minWidth: 150,
sortable: "custom", sortable: 'custom',
showOverflowTooltip: true, showOverflowTooltip: true,
}, },
{ {
prop: "OrganizationName", prop: 'OrganizationName',
label: this.$t("system:userlist:table:Organization"), label: this.$t('system:userlist:table:Organization'),
minWidth: 130, minWidth: 130,
showOverflowTooltip: true, showOverflowTooltip: true,
}, },
{ {
prop: "UserType", prop: 'UserType',
label: this.$t("system:userlist:table:UserType"), label: this.$t('system:userlist:table:UserType'),
minWidth: 100, minWidth: 100,
slot: 'UserTypeSlot', slot: 'UserTypeSlot',
sortable: "custom", sortable: 'custom',
showOverflowTooltip: true, showOverflowTooltip: true,
}, },
{ {
prop: "IsZhiZhun", prop: 'IsZhiZhun',
label: this.$t("system:userlist:table:InternalOrExternal"), label: this.$t('system:userlist:table:InternalOrExternal'),
hidden: true, hidden: true,
slot: "isZhiZhunSlot", slot: 'isZhiZhunSlot',
minWidth: 140, minWidth: 140,
sortable: "custom", sortable: 'custom',
showOverflowTooltip: true, showOverflowTooltip: true,
}, },
{ {
prop: "Status", prop: 'IsTestUser',
label: this.$t("system:userlist:table:Status"), label: this.$t('system:userlist:table:IsTestUser'),
hidden: true, hidden: true,
slot: "statusSlot", slot: 'isTestUserSlot',
minWidth: 100, minWidth: 120,
sortable: "custom", sortable: 'custom',
showOverflowTooltip: true, showOverflowTooltip: true,
}, },
{ {
prop: "CreateTime", prop: 'Status',
label: this.$t("system:userlist:table:createTime"), label: this.$t('system:userlist:table:Status'),
hidden: true,
slot: 'statusSlot',
minWidth: 100,
sortable: 'custom',
showOverflowTooltip: true,
},
{
prop: 'LastLoginTime',
label: this.$t('system:userlist:table:LastLoginTime'),
minWidth: 200, minWidth: 200,
sortable: "custom", sortable: 'custom',
showOverflowTooltip: true, showOverflowTooltip: true,
}, },
{ {
type: "operate", prop: 'LastChangePassWordTime',
label: this.$t("common:action:action"), label: this.$t('system:userlist:table:LastChangePassWordTime'),
minWidth: 250,
sortable: 'custom',
showOverflowTooltip: true,
},
{
prop: 'CreateTime',
label: this.$t('system:userlist:table:createTime'),
minWidth: 200,
sortable: 'custom',
showOverflowTooltip: true,
},
{
type: 'operate',
label: this.$t('common:action:action'),
minWidth: 100, minWidth: 100,
fixed: 'right',
operates: [ operates: [
{ {
name: this.$t("common:button:edit"), name: this.$t('common:button:edit'),
type: "primary", type: 'text',
emitKey: "editCb", emitKey: 'editCb',
}, },
// { // {
// name: this.$t("common:button:delete"), // name: this.$t('common:button:delete'),
// type: "danger", // type: 'danger',
// emitKey: "deleteCb", // emitKey: 'deleteCb',
// }, // },
], ],
}, },
], ],
searchForm: [ searchForm: [
{ {
type: "Input", type: 'Input',
label: this.$t("system:userlist:label:UserName"), label: this.$t('system:userlist:label:UserName'),
prop: "UserName", prop: 'UserName',
width: "120px", width: '120px',
placeholder: "", placeholder: '',
}, },
{ {
type: "Input", type: 'Input',
label: this.$t("system:userlist:label:RealName"), label: this.$t('system:userlist:label:RealName'),
prop: "RealName", prop: 'RealName',
width: "120px", width: '120px',
placeholder: "", placeholder: '',
}, },
{ {
type: "Input", type: 'Input',
label: this.$t("system:userlist:label:Phone"), label: this.$t('system:userlist:label:Phone'),
prop: "Phone", prop: 'Phone',
width: "120px", width: '120px',
placeholder: "", placeholder: '',
}, },
{ {
type: "Input", type: 'Input',
label: this.$t("system:userlist:label:EMail"), label: this.$t('system:userlist:label:EMail'),
prop: "EMail", prop: 'EMail',
width: "120px", width: '120px',
placeholder: "", placeholder: '',
}, },
{ {
type: "Input", type: 'Input',
label: this.$t("system:userlist:label:Organization"), label: this.$t('system:userlist:label:Organization'),
prop: "OrganizationName", prop: 'OrganizationName',
width: "120px", width: '120px',
placeholder: "", placeholder: '',
}, },
{ {
type: "Select", type: 'Select',
label: this.$t("system:userlist:label:InternalOrExternal"), label: this.$t('system:userlist:label:InternalOrExternal'),
prop: "IsZhiZhun", prop: 'IsZhiZhun',
width: "150px", width: '100px',
options: [ options: [
{ {
label: this.$t( label: this.$t(
"system:userlist:label:InternalOrExternal:Internal" 'system:userlist:label:InternalOrExternal:Internal'
), ),
value: true, value: true,
}, },
{ {
label: this.$t( label: this.$t(
"system:userlist:label:InternalOrExternal:External" 'system:userlist:label:InternalOrExternal:External'
), ),
value: false, value: false,
}, },
], ],
props: { label: "label", value: "value" }, props: { label: 'label', value: 'value' },
change: (scope) => "", change: (scope) => '',
placeholder: "", placeholder: '',
}, },
{ {
type: "Select", type: 'Select',
label: this.$t("system:userlist:label:Status"), label: this.$t('system:userlist:label:IsTestUser'),
prop: "UserState", prop: 'IsTestUser',
width: "150px", width: '100px',
options: [ options: [
{ label: this.$t("system:userlist:label:Status:Enable"), value: 1 },
{ {
label: this.$t("system:userlist:label:Status:Disable"), label: this.$t('system:userlist:label:IsTestUser:Yes'),
value: true,
},
{
label: this.$t('system:userlist:label:IsTestUser:No'),
value: false,
},
],
props: { label: 'label', value: 'value' },
change: (scope) => '',
placeholder: '',
},
{
type: 'Select',
label: this.$t('system:userlist:label:Status'),
prop: 'UserState',
width: '100px',
options: [
{ label: this.$t('system:userlist:label:Status:Enable'), value: 1 },
{
label: this.$t('system:userlist:label:Status:Disable'),
value: 0, value: 0,
}, },
], ],
props: { label: "label", value: "value" }, props: { label: 'label', value: 'value' },
change: (scope) => "", change: (scope) => '',
placeholder: "", placeholder: '',
}, },
{ {
type: "Select", type: 'Select',
label: this.$t("system:userlist:label:UserType"), label: this.$t('system:userlist:label:UserType'),
prop: "UserType", prop: 'UserType',
width: "150px", width: '100px',
options: [], // 下拉选项 options: [], // 下拉选项
props: { label: "UserType", value: "Id" }, // 下拉选项配置信息，必填 props: { label: 'UserType', value: 'Id' }, // 下拉选项配置信息，必填
placeholder: "", placeholder: '',
}, },
{ {
type: "Daterange", type: 'Daterange',
label: this.$t("system:userlist:label:CreateTime"), label: this.$t('system:userlist:label:LastLoginTime'),
prop: "CreateTimeArr", prop: 'LastLoginTimeArr',
width: "400px", width: '400px',
placeholder: "", placeholder: '',
},
{
type: 'Daterange',
label: this.$t('system:userlist:label:LastChangePassWordTime'),
prop: 'LastChangePassWordTimeArr',
width: '400px',
placeholder: '',
},
{
type: 'Daterange',
label: this.$t('system:userlist:label:CreateTime'),
prop: 'CreateTimeArr',
width: '400px',
placeholder: '',
}, },
], ],
searchHandle: [ searchHandle: [
{ {
label: this.$t("common:button:reset"), label: this.$t('common:button:search'),
type: "primary", type: 'primary',
emitKey: "reset", emitKey: 'search',
icon: 'el-icon-search',
}, },
{ {
label: this.$t("common:button:search"), label: this.$t('common:button:reset'),
type: "primary", type: 'primary',
emitKey: "search", emitKey: 'reset',
icon: 'el-icon-refresh-left',
}, },
{ {
label: this.$t("common:button:new"), label: this.$t('common:button:new'),
type: "primary", type: 'primary',
emitKey: "new", emitKey: 'new',
}, },
], ],
userTypeOptions: [], userTypeOptions: [],
@ -305,6 +376,9 @@ export default {
this.getInfo(); this.getInfo();
}, },
methods: { methods: {
diffTime(time) {
return moment(new Date()).diff(time, 'days')
},
// 获取用户信息 // 获取用户信息
getList() { getList() {
this.loading = true; this.loading = true;

2
src/views/trials/trials-panel/setting/personnel-manage/components/staffExternalAdd.vue
View File

@ -271,7 +271,7 @@ export default {
this.form.UserTypeEnum = selectedUserType[0].UserTypeEnum; this.form.UserTypeEnum = selectedUserType[0].UserTypeEnum;
} }
this.form.TrialId = this.$route.query.trialId this.form.TrialId = this.$route.query.trialId
console.log(this.form, 'this.form') // console.log(this.form, 'this.form')
addUser(this.form, true) addUser(this.form, true)
.then((res) => { .then((res) => {
this.btnLoading = false; this.btnLoading = false;

2
src/views/trials/trials-panel/setting/personnel-manage/components/staffForm.vue
View File

@ -51,7 +51,7 @@
<el-table-column type="selection" width="50" :selectable="handleSelectable" /> <el-table-column type="selection" width="50" :selectable="handleSelectable" />
<el-table-column type="index" width="50" /> <el-table-column type="index" width="50" />
<!-- 姓名 --> <!-- 姓名 -->
<el-table-column prop="UserRealName" :label="$t('trials:staff:table:name')" show-overflow-tooltip <el-table-column prop="FullName" :label="$t('trials:staff:table:name')" show-overflow-tooltip
sortable="custom" min-width="100" /> sortable="custom" min-width="100" />
<!-- 用户名 --> <!-- 用户名 -->
<el-table-column prop="UserName" :label="$t('trials:staff:table:uid')" show-overflow-tooltip sortable="custom" <el-table-column prop="UserName" :label="$t('trials:staff:table:uid')" show-overflow-tooltip sortable="custom"