Skip to content

liangzhen / framework-tools-web

Go to a project
Commit 96b3f338 by liuyong
Options

Merge branch 'master' of http://47.97.176.204:19000/wangwansu/iact_jiagou_drowio

2 parents ea93fe08 c1b0bd01
Inline Side-by-side
Showing with 1627 additions and 506 deletions
src/components/ListPage.vue 0 → 100644
<!--
* @Description: 列表页公共组件
* @Version: 2.0
* @Autor: pan
* @Date: 2024-03-12 14:01:57
* @LastEditors: pan
* @LastEditTime: 2024-03-12 16:02:21
-->
<template>
<div class="list-page">
<!-- 头部搜索区域 -->
<div class="formWrap">
<slot name="formWrap" />
</div>
<!-- 查询条件与表格中间的操作按钮 -->
<div class="operation-wrap">
<slot name="operationWrap" />
</div>
<!-- 表格 -->
<div class="table-wrap">
<slot name="tableWrap" />
</div>
</div>
</template>
<script>
export default {
name: 'list-page',
}
</script>
<style scoped lang="scss">
.list-page {
display: flex;
flex-direction: column;
height: 100%;
padding: 0 20px;
box-sizing: border-box;
.operation-wrap {
display: flex;
padding: 10px 0;
box-sizing: border-box;
}
.table-wrap {
flex: 1;
min-height: 180px;
}
}
</style>
src/components/SearchForm.vue 0 → 100644
<!--
* @Description: 列表查询条件封装
* @Version: 2.0
* @Autor: pan
* @Date: 2024-03-12 14:55:59
* @LastEditors: pan
* @LastEditTime: 2024-03-12 16:14:30
-->
<!-- /**
* 搜索栏公共组件
*/ -->
<template>
<div class="search-form-box">
<el-form :model="formData" ref="formRef" :inline="true">
<el-row>
<el-col
:xs="24"
:sm="12"
:md="8"
:lg="6"
:xl="4"
v-for="(item, index) in formOptions"
:key="newKeys[index]"
>
<el-form-item
:prop="item.prop"
:label="item.label"
:rules="item.rules"
@keyup.enter.native="onSearch"
>
<SearchFormItem v-model="formData[item.prop]" :itemOptions="item" />
</el-form-item>
</el-col>
</el-row>
<!-- 自定义插槽，可用于特殊表单块 -->
<slot></slot>
</el-form>
<!-- 提交按钮 -->
<div class="btn-box">
<el-button
v-if="btnItems.includes('search')"
size="medium"
type="primary"
class="btn-search"
icon="el-icon-search"
@click="onSearch"
>查询</el-button
>
<!-- <el-button
v-if="btnItems.includes('export')"
size="mini"
type="primary"
class="btn-export"
@click="onExport"
>导出</el-button
> -->
<el-button
size="medium"
type="default"
class="btn-reset"
icon="el-icon-refresh"
@click="onReset"
>重置</el-button
>
</div>
</div>
</template>
<script>
import SearchFormItem from './SearchFormItem.vue'
export default {
props: {
/**
* 表单配置
* 示例：
* [{
* label: '用户名', // label文字
* prop: 'username', // 字段名
* element: 'el-input', // 指定elementui组件
* initValue: '阿黄', // 字段初始值
* placeholder: '请输入用户名', // elementui组件属性
* rules: [{ required: true, message: '必填项', trigger: 'blur' }], // elementui组件属性
* events: { // elementui组件方法
* input (val) {
* console.log(val)
* },
* ...... // 可添加任意elementui组件支持的方法
* }
* ...... // 可添加任意elementui组件支持的属性
* }]
*/
formOptions: {
type: Array,
required: true,
default() {
return []
},
},
// 提交按钮项，多个用逗号分隔（search, export, reset）
btnItems: {
type: String,
default() {
return 'search'
},
},
},
data() {
return {
formData: {},
}
},
computed: {
newKeys() {
return this.formOptions.map((v) => {
return this.createUniqueString()
})
},
},
created() {
this.addInitValue()
},
methods: {
createUniqueString() {
const timestamp = +new Date() + ''
const randomNum = parseInt((1 + Math.random()) * 65536) + ''
return (+(randomNum + timestamp)).toString(32)
},
// 校验
onValidate(callback) {
this.$refs.formRef.validate((valid) => {
if (valid) {
// console.log('提交成功')
console.log(this.formData)
callback()
}
})
},
// 搜索
onSearch() {
this.onValidate(() => {
this.$emit('onSearch', this.formData)
})
},
// 导出
onExport() {
this.onValidate(() => {
this.$emit('onExport', this.formData)
})
},
onReset() {
this.$refs.formRef.resetFields()
},
// 添加初始值
addInitValue() {
const obj = {}
this.formOptions.forEach((v) => {
if (v.initValue !== undefined) {
obj[v.prop] = v.initValue
}
})
this.formData = obj
},
},
components: { SearchFormItem },
}
</script>
<style lang="scss" scoped>
.search-form-box {
display: flex;
margin-top: 10px;
.btn-box {
// padding-top: 5px;
display: flex;
height: 38px;
// button {
// height: 38px;
// }
}
.el-form {
/deep/ .el-form-item__label {
// padding-right: 0;
margin-bottom: 10px;
flex-shrink: 0;
color: #000;
}
.el-form-item {
margin-bottom: 0;
display: flex;
&.is-error {
margin-bottom: 25px;
}
}
// el-input宽度
/deep/ .form-item {
> .el-input:not(.el-date-editor) {
max-width: 220px;
}
}
/deep/ .el-select {
max-width: 220px;
}
/deep/ .el-cascader {
max-width: 200px;
}
}
}
</style>
src/components/SearchFormItem.vue 0 → 100644
<!--
* @Description: 表单匹配项
* @Version: 2.0
* @Autor: pan
* @Date: 2024-03-12 15:11:47
* @LastEditors: pan
* @LastEditTime: 2024-03-13 16:54:21
-->
<template>
<div class="form-item">
<el-input
v-if="isInput"
v-no-backslash
v-model="currentVal"
v-bind="bindProps"
v-on="bindEvents"
:placeholder="itemOptions.placeholder"
></el-input>
<el-input-number
v-if="isInputNumber"
v-model="currentVal"
v-bind="bindProps"
v-on="bindEvents"
:controls-position="itemOptions['controls-position'] || 'right'"
></el-input-number>
<el-select
v-if="isSelect"
v-model="currentVal"
v-bind="bindProps"
v-on="bindEvents"
clearable
>
<el-option
v-for="item in itemOptions.options"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
<!-- datetimerange/daterange -->
<!-- <el-date-picker
v-if="isDatePickerDateRange"
v-model="currentVal"
v-bind="bindProps"
v-on="bindEvents"
:type="itemOptions.type || 'datetimerange'"
clearable
:picker-options="pickerOptionsRange"
start-placeholder="开始日期"
range-separator="至"
end-placeholder="结束日期"
:default-time="['00:00:00', '23:59:59']"
value-format="yyyy-MM-dd HH:mm:ss"
></el-date-picker> -->
<!-- monthrange -->
<!-- <el-date-picker
v-if="isDatePickerMonthRange"
v-model="currentVal"
v-bind="bindProps"
v-on="bindEvents"
:type="itemOptions.type"
clearable
:picker-options="pickerOptionsRangeMonth"
start-placeholder="开始日期"
range-separator="至"
end-placeholder="结束日期"
value-format="yyyy-MM"
></el-date-picker> -->
<!-- other -->
<el-date-picker
v-if="isDatePickerOthers"
v-model="currentVal"
v-bind="bindProps"
v-on="bindEvents"
:type="itemOptions.type"
clearable
value-format="yyyy-MM-dd"
placeholder="请选择日期"
style="width: 300px"
></el-date-picker>
<el-cascader
v-if="isCascader"
v-model="currentVal"
v-bind="bindProps"
v-on="bindEvents"
size="mini"
clearable
></el-cascader>
</div>
</template>
<script>
import { getDianXingAnLiSelectData } from '@/api/index.js'
export default {
inheritAttrs: false,
props: {
value: {},
itemOptions: {
type: Object,
default() {
return {}
},
},
},
data() {
return {
// pickerOptionsRange: tools.pickerOptionsRange,
// pickerOptionsRangeMonth: tools.pickerOptionsRangeMonth,
}
},
computed: {
// 双向绑定数据值
currentVal: {
get() {
return this.value
},
set(val) {
this.$emit('input', val)
},
},
// 绑定属性
bindProps() {
let obj = { ...this.itemOptions }
// 移除冗余属性
delete obj.label
delete obj.prop
delete obj.element
delete obj.initValue
delete obj.rules
delete obj.events
if (obj.element === 'el-select') {
delete obj.options
}
return obj
},
// 绑定方法
bindEvents() {
return this.itemOptions.events || {}
},
// el-input
isInput() {
return this.itemOptions.element === 'el-input'
},
// el-input-number
isInputNumber() {
return this.itemOptions.element === 'el-input-number'
},
// el-select
isSelect() {
return this.itemOptions.element === 'el-select'
},
// el-date-picker (type: datetimerange/daterange)
isDatePickerDateRange() {
const isDatePicker = this.itemOptions.element === 'el-date-picker'
const isDateRange =
!this.itemOptions.type ||
this.itemOptions.type === 'datetimerange' ||
this.itemOptions.type === 'daterange'
return isDatePicker && isDateRange
},
// el-date-picker (type: monthrange)
isDatePickerMonthRange() {
const isDatePicker = this.itemOptions.element === 'el-date-picker'
const isMonthRange = this.itemOptions.type === 'monthrange'
return isDatePicker && isMonthRange
},
// el-date-picker (type: other)
isDatePickerOthers() {
const isDatePicker = this.itemOptions.element === 'el-date-picker'
return (
isDatePicker &&
!this.isDatePickerDateRange &&
!this.isDatePickerMonthRange
)
},
// el-cascader
isCascader() {
return this.itemOptions.element === 'el-cascader'
},
},
created() {},
methods: {
async getDictTypeOptions(key) {
var dictTypeOptions = []
var storedDic = localStorage.getItem('dic_' + key)
if (storedDic) {
dictTypeOptions = JSON.parse(storedDic)
} else {
const params = { key }
const res = await getDianXingAnLiSelectData(params)
dictTypeOptions = res.data
const jsonStr = JSON.stringify(res.data)
localStorage.setItem('dic_' + key, jsonStr)
// await getDianXingAnLiSelectData(params).then((res) => {
// if (res.code === 200) {
// var options = res.data
// var jsonStr = JSON.stringify(options)
// localStorage.setItem('dic_' + key, jsonStr)
// dictTypeOptions = res.data
// console.log(dictTypeOptions)
// }
// })
}
return dictTypeOptions
},
},
components: {},
}
</script>
<style lang="scss" scoped></style>
src/components/TableConfig.vue 0 → 100644
<!--
* @Description: elementui表格组件二次封装
* @Version: 2.0
* @Autor: pan
* @Date: 2024-03-11 14:53:40
* @LastEditors: pan
* @LastEditTime: 2024-03-12 15:02:11
-->
<!-- 示例
columns: [{ label: '头像', prop: 'avatar', align: 'center', __slotName: 'avatar',callback: (row, title) => {
// console.log(row)
if (title) {
switch (title) {
case "查看":
return this.dialogShow(row);
}
}
},
}]
使用TableConfig组件
<table-config @fetchData="fetchData" :query="query" :columns="columns">
<template slot="icon" v-slot="scope">
<img slot="icon" width="40" :src="scope.data.row.avatar" />
</template>
</table-config> -->
<template>
<div class="tableConfig">
<el-table
class="config-table"
v-loading="loading"
v-bind="$attrs"
v-on="listeners"
:data="tableData"
:row-key="idKey"
stripe
border
height="100%"
>
<!-- <el-table-column
v-if="isCheck"
align="center"
width="70"
type="selection"
:reserve-selection="isCheckMemory"
>
</el-table-column> -->
<template v-for="item in columns">
<!-- v-html存在安全问题暂时弃用 -->
<!-- 如果接口返回的内容需要我们解析出来并渲染到页面中 比如：0 代表 已停用 1 代表 已发布 2 代表 暂存 -->
<!-- <el-table-column
v-if="item.type === 'function'"
v-bind="item"
:key="item.prop"
align="center"
>
<template slot-scope="scope">
<span v-html="item.callback && item.callback(scope.row)"></span>
</template>
</el-table-column> -->
<!-- 操作列 -->
<el-table-column
v-if="item.type === 'operation'"
:key="item.prop"
v-bind="item"
align="center"
>
<template #default="scope">
<el-button
class="btn"
v-for="items in item.actionButtons"
:key="items.title"
:type="items.type"
@click="item.callback(scope.row, items.title)"
:icon="items.icon"
:circle="items.circle"
><span v-if="!items.circle">{{ items.title }}</span></el-button
>
</template>
</el-table-column>
<!-- 普通渲染 -->
<el-table-column
v-else
:key="item.prop"
v-bind="item"
show-overflow-tooltip
align="center"
>
<!-- 自定义插槽 -->
<template v-if="item.__slotName" #default="scope">
<slot :name="item.__slotName" :data="scope"></slot>
</template>
<!-- 字典值匹配 如后端给state: 0 页面要渲染成已停用-->
<template v-if="item.collectionType">
<span></span>
</template>
</el-table-column>
</template>
</el-table>
<div class="config-pagenation">
<el-pagination
class="pagination"
background
v-if="hasPagination"
@size-change="sizeChange"
@current-change="currentChange"
:total="pagination.totalRow"
:current-page="pagination.current"
:page-size="pagination.pageSize"
:page-sizes="pageSizes"
:layout="layout"
>
</el-pagination>
</div>
</div>
</template>
<script>
import { get, post } from '@/utils/http'
export default {
name: 'tableConfig',
props: {
// columns: [{ label: '头像', prop: 'avatar', align: 'center', __slotName: 'avatar' }]
// 配置项
columns: {
type: Array,
default: () => [],
},
/**
* 分页需要传入后台的字段
*/
pageParam: {
type: Object,
default() {
return {
pageOffset: 'current',
pageSize: 'pageSize',
}
},
},
// 接口参数
query: {
type: Object,
default() {
return {
url: '',
method: '',
queryParam: {},
}
},
},
/**
* 是否需要跨页勾选
*/
// isCheckMemory: {
// type: Boolean,
// default: false,
// },
// /**
// * 表格行数据的唯一键
// */
idKey: {
type: String,
default: 'id',
},
// 是否显示分页组件
hasPagination: {
type: Boolean,
default: true,
},
layout: {
type: String,
default: 'total, sizes, prev, pager, next, jumper',
},
pageSizes: {
type: Array,
default() {
return [10, 20, 50, 100, 200]
},
},
},
data() {
return {
tableData: [],
pagination: {
current: 1,
pageSize: 10,
totalRow: 0,
},
loading: false,
}
},
computed: {
listeners: function () {
var vm = this
return Object.assign({}, this.$listeners, {
'selection-change': function (val) {
// dosomething
vm.selectData = val
vm.$emit('selection-change', val)
},
})
},
},
created() {
this.queryData()
},
methods: {
/**
* 切换分页数量
* @param { Number } pageSize 页数
*/
sizeChange(pageSize) {
this.pagination.current = 1
this.pagination.pageSize = pageSize
this.queryData()
},
/**
* 切换页码
* @param { Number } current 页码
*/
currentChange(current) {
this.pagination.current = current
this.queryData(true)
},
async queryData(isReset) {
if (this.query && this.query.url) {
this.loading = true
this.pagination.current = isReset ? this.pagination.current : 1
let param = Object.assign({}, this.query.queryParam, {
[this.pageParam.pageOffset]: this.pagination.current,
[this.pageParam.pageSize]: this.pagination.pageSize,
})
// if (this.order.sortName && this.order.sortOrder) {
// param.sortName = this.order.sortName
// param.sortOrder = this.order.sortOrder
// }
let result = null
console.log('param', param)
try {
switch (this.query.method) {
case 'get':
result = await get(this.query.url, param)
break
case 'post':
result = await post(this.query.url, param)
break
default:
result = await get(this.query.url, param)
break
}
} catch (e) {
console.warn(e)
} finally {
this.loading = false
// console.log('result', result)
const { data } = result
if (result && result.code === 200) {
this.pagination.totalRow = data.total
this.tableData = data.records
this.$emit('fetchData', data)
} else {
this.$message({
type: 'warning',
message: result ? result.msg : '查询失败!',
})
this.tableData = []
this.pagination.current = 1
this.pagination.totalRow = 0
}
}
}
},
},
}
</script>
<style lang="scss" scoped>
.tableConfig {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
.config-table {
flex: 1;
}
.config-pagenation {
margin-top: 20px;
margin-bottom: 30px;
}
}
</style>
src/components/onlyOffice/demo.vue 0 → 100644
<template>
<!-- onlyoffice展示 -->
<div class="qualityManual-container">
<div class="qualityManual-container-office">
<vab-only-office
id="office-preview"
:documentServerUrl="documentServerUrl"
:config="config"
/>
</div>
</div>
</template>
<script>
import vabOnlyOffice from './index.vue'
export default {
components: { vabOnlyOffice },
data() {
return {
documentServerUrl: 'http://121.201.2.228:53327/',
config: {
document: {
fileType: 'doc',
// 给服务端用的唯一id，同一个id就会获取服务器缓存里的文件（有这个key，就会先根据它去缓存里找），这项如果最开始只是先试用，可以先给个空字符串
key: '',
// 文件名
title: 'text.docx',
//相关权限
// permissions: {
// copy: true, //定义内容是否可以复制到剪贴板。如果该参数设置为false，则只能在当前文档编辑器中粘贴内容。默认值为true。
// download: true, //定义文档是可以下载还是只能在线查看或编辑。如果下载权限设置为“假”的下载为...菜单选项将是缺席的文件菜单。默认值为true。
// edit: true, //定义文档是可以编辑还是只能查看。如果编辑权限设置为“true”，则文件菜单将包含编辑文档菜单选项；请注意，如果编辑权限设置为“false”，文档将在查看器中打开，即使模式参数设置为edit，您也无法将其切换到编辑器。默认值为true。
// print: true, //定义是否可以打印文档。如果打印权限设置为“false”的打印菜单选项将是缺席的文件菜单。默认值为true
// },
// 所要渲染的文件的绝对路径，这个参数很重要，它传的不是文件的本地地址，而是需要把文件传到项目所依赖的服务器，然后拿到文件在服务器的url地址（这个一般情况需要后端支持）才可以用，这个参数决定了能不能实例化出来onlyoffice对象
url: 'http://172.20.10.9:9997/downloadFile/22',
},
documentType: 'word',
height: '100%',
width: '100%',
editorConfig: {
//语言：zh-CN简体中文/en英文
lang: 'zh-CN',
//阅读状态 view/edit
mode: 'edit',
customization: {
//是否显示插件
plugins: false,
},
user: {
// 当前正在view/edit此文档的用户信息
name: '',
},
// 指定文档存储服务器的绝对路径
callbackUrl: 'http://192.168.8.120:9997/callback?fileId=22',
},
},
}
},
methods: {
//这里的val是传递的参数
// loadOnlyOffice(val) {
// this.option.key = // key 默认置空则不走缓存
// this.option.title = '' // 该文件名在下载文档时也将用作文件名
// this.option.url = // 定义存储原始查看或编辑的文档的绝对URL
// this.option.fileType = 'docx' // 文件类型
// this.option.callbackUrl = '' // 回调地址
// this.show = true // 打开onlyOffice窗口
// console.log(val, '编辑word默认配置参数')
// },
},
}
</script>
<style rel="stylesheet/scss" lang="scss">
.qualityManual-container {
padding: 0 !important;
width: 100%;
height: calc(100vh - 180px);
}
.qualityManual-container-office {
width: 100%;
height: calc(100% - 55px);
}
</style>
src/components/onlyOffice/index.vue 0 → 100644
<template>
<div :class="s.view">
<div :id="id"></div>
</div>
</template>
<script>
import loadScript from './loadScript.js'
export default {
name: 'DocumentEditor',
props: {
id: {
type: String,
default: '',
},
documentServerUrl: {
type: String,
default: '',
},
config: {
type: Object,
default: () => {},
},
document_fileType: {
type: String,
default: '',
},
document_title: {
type: String,
default: '',
},
documentType: {
type: String,
default: '',
},
editorConfig_lang: {
type: String,
default: '',
},
height: {
type: String,
default: '',
},
type: {
type: String,
default: '',
},
width: {
type: String,
default: '',
},
events_onAppReady: {
type: Function,
default: () => {},
},
events_onDocumentStateChange: {
type: Function,
default: () => {},
},
events_onMetaChange: {
type: Function,
default: () => {},
},
events_onDocumentReady: {
type: Function,
default: () => {},
},
events_onInfo: {
type: Function,
default: () => {},
},
events_onWarning: {
type: Function,
default: () => {},
},
events_onError: {
type: Function,
default: () => {},
},
events_onRequestSharingSettings: {
type: Function,
default: () => {},
},
events_onRequestRename: {
type: Function,
default: () => {},
},
events_onMakeActionLink: {
type: Function,
default: () => {},
},
events_onRequestInsertImage: {
type: Function,
default: () => {},
},
events_onRequestSaveAs: {
type: Function,
default: () => {},
},
events_onRequestMailMergeRecipients: {
type: Function,
default: () => {},
},
events_onRequestCompareFile: {
type: Function,
default: () => {},
},
events_onRequestEditRights: {
type: Function,
default: () => {},
},
events_onRequestHistory: {
type: Function,
default: () => {},
},
events_onRequestHistoryClose: {
type: Function,
default: () => {},
},
events_onRequestHistoryData: {
type: Function,
default: () => {},
},
events_onRequestRestore: {
type: Function,
default: () => {},
},
},
data() {
return {}
},
watch: {
config: {
handler() {
this.onChangeProps()
},
deep: true,
},
document_fileType() {
this.onChangeProps()
},
document_title() {
this.onChangeProps()
},
documentType() {
this.onChangeProps()
},
editorConfig_lang() {
this.onChangeProps()
},
height() {
this.onChangeProps()
},
type() {
this.onChangeProps()
},
width() {
this.onChangeProps()
},
},
mounted() {
let url = this.documentServerUrl
console.log('url', url)
if (!url.endsWith('/')) {
url += '/'
}
const docApiUrl = `${url}web-apps/apps/api/documents/api.js`
loadScript(docApiUrl, 'onlyoffice-api-script')
.then(() => this.onLoad())
.catch((err) => console.error(err))
},
beforeDestroy() {
const id = this.id || ''
if (window?.DocEditor?.instances[id]) {
window.DocEditor.instances[id].destroyEditor()
window.DocEditor.instances[id] = undefined
}
},
methods: {
onLoad() {
try {
const id = this.id || ''
if (!window.DocsAPI) throw new Error('DocsAPI is not defined')
if (window?.DocEditor?.instances[id]) {
console.log('Skip loading. Instance already exists', id)
return
}
if (!window?.DocEditor?.instances) {
window.DocEditor = { instances: {} }
}
const initConfig = {
document: {
fileType: this.document_fileType,
title: this.document_title,
},
documentType: this.documentType,
editorConfig: {
lang: this.editorConfig_lang,
},
events: {
onAppReady: this.onAppReady,
onDocumentStateChange: this.events_onDocumentStateChange,
onMetaChange: this.events_onMetaChange,
onDocumentReady: this.events_onDocumentReady,
onInfo: this.events_onInfo,
onWarning: this.events_onWarning,
onError: this.events_onError,
onRequestSharingSettings: this.events_onRequestSharingSettings,
onRequestRename: this.events_onRequestRename,
onMakeActionLink: this.events_onMakeActionLink,
onRequestInsertImage: this.events_onRequestInsertImage,
onRequestSaveAs: this.events_onRequestSaveAs,
onRequestMailMergeRecipients:
this.events_onRequestMailMergeRecipients,
onRequestCompareFile: this.events_onRequestCompareFile,
onRequestEditRights: this.events_onRequestEditRights,
onRequestHistory: this.events_onRequestHistory,
onRequestHistoryClose: this.events_onRequestHistoryClose,
onRequestHistoryData: this.events_onRequestHistoryData,
onRequestRestore: this.events_onRequestRestore,
},
height: this.height,
type: this.type,
width: this.width,
...(this.config || {}),
}
const editor = new DocsAPI.DocEditor(id, initConfig)
window.DocEditor.instances[id] = editor
} catch (err) {
console.error(err)
this.events_onError(err)
}
},
onAppReady() {
const id = this.id || ''
this.events_onAppReady(window.DocEditor.instances[id])
},
onChangeProps() {
const id = this.id || ''
if (window?.DocEditor?.instances[id]) {
window.DocEditor.instances[id].destroyEditor()
window.DocEditor.instances[id] = undefined
console.log('Important props have been changed. Load new Editor.')
this.onLoad()
}
},
},
}
</script>
<style lang="scss" module="s">
.view {
width: 100%;
height: 100%;
iframe {
width: 100%;
height: 100%;
}
}
</style>
src/components/onlyOffice/loadScript.js 0 → 100644
const loadScript = async (url, id) =>
new Promise((resolve, reject) => {
try {
if (document.getElementById(id)) {
if (window.DocsAPI) return resolve(null)
const intervalHandler = setInterval(() => {
if (!window.DocsAPI) return
clearInterval(intervalHandler)
return resolve(null)
}, 500)
} else {
const script = document.createElement('script')
script.setAttribute('type', 'text/javascript')
script.setAttribute('id', id)
script.onload = resolve
script.onerror = reject
script.src = url
script.async = true
document.body.appendChild(script)
}
} catch (e) {
console.error(e)
}
})
export default loadScript
src/main.js
...@@ -2,19 +2,19 @@ import Vue from 'vue' ...@@ -2,19 +2,19 @@ import Vue from 'vue'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
import store from './store' import store from './store'
import ElementUI from 'element-ui'; import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'; import 'element-ui/lib/theme-chalk/index.css'
import initDirective from './directive'; import './styles/element-variables.scss'
import initDirective from './directive'
initDirective(Vue); initDirective(Vue)
Vue.config.productionTip = false; Vue.config.productionTip = false
Vue.use(ElementUI);
Vue.use(ElementUI)
new Vue({ new Vue({
router, router,
store, store,
render: h => h(App) render: (h) => h(App),
}).$mount('#app') }).$mount('#app')
src/styles/common.scss 0 → 100644
$color-primary: #0d867f;
@for $i from 0 through 50 {
.m-#{$i} {
margin: #{$i}px;
}
.m-t-#{$i} {
margin-top: #{$i}px;
}
.m-b-#{$i} {
margin-bottom: #{$i}px;
}
.m-r-#{$i} {
margin-right: #{$i}px;
}
.m-l-#{$i} {
margin-left: #{$i}px;
}
.m-lr-#{$i} {
margin-left: #{$i}px;
margin-right: #{$i}px;
}
.m-tb-#{$i} {
margin-top: #{$i}px;
margin-bottom: #{$i}px;
}
.m-n#{$i} {
margin: -#{$i}px;
}
.m-t-n#{$i} {
margin-top: -#{$i}px;
}
.m-b-n#{$i} {
margin-top: -#{$i}px;
}
.p-#{$i} {
padding: #{$i}px;
}
.p-t-#{$i} {
padding-top: #{$i}px;
}
.p-b-#{$i} {
padding-bottom: #{$i}px;
}
.p-r-#{$i} {
padding-right: #{$i}px;
}
.p-l-#{$i} {
padding-left: #{$i}px;
}
.p-lr-#{$i} {
padding-left: #{$i}px;
padding-right: #{$i}px;
}
.p-tb-#{$i} {
padding-top: #{$i}px;
padding-bottom: #{$i}px;
}
.p-n#{$i} {
padding: -#{$i}px;
}
.p-t-n#{$i} {
padding-top: -#{$i}px;
}
}
.flex {
display: flex;
}
.flex-1 {
flex: 1;
}
.flex-c {
display: flex;
align-items: center;
justify-content: center;
}
.flex-column {
display: flex;
flex-direction: column;
}
.flex-b-c {
display: flex;
justify-content: space-between;
align-items: center;
}
.flex-e-c {
display: flex;
justify-content: flex-end;
align-items: center;
}
.w-100 {
width: 100%;
}
.h-100 {
height: 100%;
}
.searchTable {
width: 100%;
}
src/styles/element-variables.scss 0 → 100644
/* theme color */
$--color-primary: #0d867f !default;
// $--color-success: #13ce66;
// $--color-warning: #ffba00;
// $--color-danger: #ff4949;
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import '~element-ui/packages/theme-chalk/src/index';
src/views/reviewArchiPoliticeCheck/details.vue
<template> <template>
<div class="reviewArchiPoliticeCheckDetails"> <div class="reviewArchiPoliticeCheckDetails">
<el-tabs> <el-tabs class="m-lr-10" v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="运安符合性审查"> <el-tab-pane
<Tab1></Tab1> :label="item.label"
</el-tab-pane> :name="item.name"
<el-tab-pane label="功能满足审查"> v-for="item in tabOptions"
<Tab2></Tab2> :key="item.name"
</el-tab-pane> lazy
<el-tab-pane label="运行可靠性审查"> >
<Tab3></Tab3> <keep-alive>
</el-tab-pane> <component :is="componentTag"></component>
<el-tab-pane label="系统实用性审查"> </keep-alive>
<Tab4></Tab4>
</el-tab-pane>
<el-tab-pane label="系统安全性审查">
<Tab5></Tab5>
</el-tab-pane>
<el-tab-pane label="资源复用性审查">
<Tab6></Tab6>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
</template> </template>
<script> <script>
import Tab1 from './tab1.vue'; import Tab1 from './tab1.vue'
import Tab2 from './tab2.vue'; import Tab2 from './tab2.vue'
import Tab3 from './tab3.vue'; import Tab3 from './tab3.vue'
import Tab4 from './tab4.vue'; import Tab4 from './tab4.vue'
import Tab5 from './tab5.vue'; import Tab5 from './tab5.vue'
import Tab6 from './tab6.vue'; export default {
import { MessageBox, Message } from 'element-ui';
import $ from 'jquery';
import {
saveArchiViewManageCardDetails
} from '@/api/index.js';
export default {
name: 'reviewArchiPoliticeCheckDetails', name: 'reviewArchiPoliticeCheckDetails',
components: { components: {
Tab1, Tab1,
...@@ -44,68 +30,51 @@ ...@@ -44,68 +30,51 @@
Tab3, Tab3,
Tab4, Tab4,
Tab5, Tab5,
Tab6
}, },
data() { data() {
return { return {
routerId: null, activeName: '',
}; tabOptions: [
{ label: '运安符合性审查', name: '1' },
{ label: '功能满足审查', name: '2' },
{ label: '运行可靠性审查', name: '3' },
{ label: '系统实用性审查', name: '4' },
{ label: '系统安全性审查', name: '5' },
{ label: '资源复用性审查', name: '6' },
],
componentTag: '',
}
}, },
mounted(){ created() {
const { name } = this.$route.query
if (name) {
this.activeName = name
this.componentTag = `tab${name}`
} else {
this.activeName = '1'
this.componentTag = 'tab1'
}
}, },
methods: { methods: {
handleClick(tab, event) {
} console.log(tab, event)
} this.componentTag = `tab${+tab.index + 1}`
},
},
}
</script> </script>
<style> <style lang="scss" scoped>
.confirmClass{ @import '@/styles/common.scss';
background-color: #0D867F !important; .reviewArchiPoliticeCheckDetails {
}
.el-message-box__content{
padding: 60px 15px 60px 15px;
}
</style>
<style scoped>
.el-tabs{
width: 100%; width: 100%;
& > div {
height: 100%; height: 100%;
} }
/deep/ .el-tabs__item.is-active { /deep/ .el-tabs__content {
color: #0D867F; height: calc(100% - 55px);
} .el-tab-pane {
/deep/ .el-tabs__item:hover{
color: #0D867F;
}
/deep/ .el-tabs__active-bar{
background-color: #0D867F;
}
/deep/ .el-tabs__content{
height: calc(100% - 38px);
padding: 0;
}
.el-tab-pane{
height: 100%; height: 100%;
} }
.reviewArchiPoliticeCheckDetails{
width: 100%;
height: 100%;
display: flex;
position: relative;
}
/deep/ .el-dialog__header{
background-color: #0D867F;
text-align: left;
}
/deep/ .el-dialog__title{
color: #fff;
}
/deep/ .el-dialog__close {
color: #fff;
}
.greenButton{
background-color: #0D867F;
color: #fff;
} }
}
</style> </style>
src/views/reviewArchiPoliticeCheck/index.scss 0 → 100644
@import '@/styles/common.scss';
// 详情部分样式
.content {
flex: 1;
.left_container,
.right_container {
width: 50%;
&_title {
height: 38px;
display: flex;
align-items: center;
font-size: 13px;
background: #dbf4f3;
}
&_content {
border: 1px solid #ccc;
border-top: none;
}
}
.icon {
color: $color-primary;
font-size: 18px;
}
}
.bottom_container {
&_title {
position: relative;
&::before {
content: '';
position: absolute;
left: 0;
top: 2px;
width: 6px;
border-radius: 4px;
height: 20px;
background-color: $color-primary;
}
}
}
src/views/reviewArchiPoliticeCheck/index.vue
<template> <template>
<div class="reviewArchiPoliticeCheck"> <div class="searchTable">
<div class="table_container"> <list-page>
<div class="search_menu"> <!-- 查询表单插槽 -->
<div class="search_menu_item_container"> <template #formWrap>
<div class="search_menu_item"> <SearchForm @onSearch="querySearch" :form-options="formOptions" />
<span class="search_title">单位</span>
<el-select v-model="searchParams.let1" placeholder="请选择" class="search_item">
<el-option v-for="item in fuHeDu" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div>
<div class="search_menu_item">
<span class="search_title">部门</span>
<el-select v-model="searchParams.let2" placeholder="请选择" class="search_item">
<el-option v-for="item in fuHeDu" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div>
<div class="search_menu_item">
<span class="search_title">系统名称</span>
<el-select v-model="searchParams.let3" placeholder="请选择" class="search_item">
<el-option v-for="item in fuHeDu" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div>
<div class="search_menu_item">
<span class="search_title">建设类型</span>
<el-select v-model="searchParams.let4" placeholder="请选择" class="search_item">
<el-option v-for="item in fuHeDu" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div>
</div>
<div class="search_menu_btn_container">
<div class="query_btn" @click="search_table">
<img class="btn_icon" src="@/assets/archi-ele-list/search.png" alt="" />
<p>查询</p>
</div>
<div class="reset_btn" @click="reset">
<img class="btn_icon" src="@/assets/archi-ele-list/reset.png" alt="" />
<p>重置</p>
</div>
</div>
</div>
<div class="search_btn">
<el-button type="primary" size="medium" @click="toDetails">架构政策审查</el-button>
</div>
<el-table :height="tableHeight" v-loading="loading" @selection-change="select_table_rows" :data="tableData" stripe border>
<el-table-column type="selection" width="55" :selectable="selectable"></el-table-column>
<el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
<el-table-column prop="deptName" label="单位" align="center"></el-table-column>
<el-table-column prop="startTime" label="部门" align="center"></el-table-column>
<el-table-column prop="policyName" label="系统名称" align="center" width="200" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="policyContent" label="建设类型" align="center"></el-table-column>
<el-table-column prop="policyContent" label="项目名称" align="center" width="200" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="policyContent" label="是否续建" align="center"></el-table-column>
<el-table-column prop="policyContent" label="承建单位" align="center"></el-table-column>
<el-table-column prop="policyContent" label="运安符合性审查" align="center"></el-table-column>
<el-table-column prop="conformCount" label="功能满足审查" align="center">
<template slot-scope="scope">
<div>
{{ scope.row.conformCount }}%
</div>
</template> </template>
</el-table-column> <!-- 中部操作按钮 -->
<el-table-column prop="usefulCount" label="运行可靠性审查" align="center"></el-table-column> <template #operationWrap>
<el-table-column prop="usefulCount" label="系统实用性审查" align="center"></el-table-column> <el-button type="primary" size="medium" plain @click="toDetails"
<el-table-column prop="remark" label="系统安全性审查" align="center"></el-table-column> >架构政策审查</el-button
<el-table-column prop="remark" label="资源复用性审查" align="center"></el-table-column> >
</el-table> </template>
<!-- <el-pagination <!-- 表格插槽 -->
background <template #tableWrap>
layout="prev, pager, next" <table-config
:total="50"> ref="searchTable"
</el-pagination> --> @selection-change="selectionChange"
<el-pagination :query="query"
background :columns="columns"
@size-change="handleSizeChange" id-key="elementId"
@current-change="handleCurrentChange" >
:current-page="pager.current" </table-config>
:page-sizes="pager.sizes" </template>
:page-size="pager.size" </list-page>
layout="total, sizes, prev, pager, next, jumper"
:total="pager.total">
</el-pagination>
</div>
<el-dialog
:title="is_add_edit == 'add' ? '新建字典' : '编辑字典'"
:visible.sync="add_dialog"
:center="false"
:close-on-click-modal="false"
width="60%">
<el-form :model="ruleForm" ref="form" :rules="rules" style="display: flex;flex-wrap: wrap;">
<el-form-item label="字典名称:" prop="let1">
<el-input v-no-backslash v-model="ruleForm.let1" maxlength="100"></el-input>
</el-form-item>
<el-form-item label="字典标识:" prop="let2">
<el-input v-no-backslash v-model="ruleForm.let2" maxlength="100"></el-input>
</el-form-item>
<el-form-item class="cross1" label="描述:" prop="let3">
<el-input v-no-backslash v-model="ruleForm.let3" type="textarea" :rows="3" maxlength="200" show-word-limit placeholder="请输入内容"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button class="greenButton" @click="save_dicy">保存</el-button>
<el-button @click="add_dialog = false">取消</el-button>
</span>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
import { import ListPage from '@/components/ListPage.vue'
getJiShuZhengCeGuanLianShiYongTable, import SearchForm from '@/components/SearchForm.vue'
getDianXingAnLiSelectData import TableConfig from '@/components/TableConfig.vue'
} from '@/api/index.js';
import { MessageBox, Message } from 'element-ui';
import $ from 'jquery';
import { getDianXingAnLiSelectData } from '@/api/index.js'
export default { export default {
name: 'reviewArchiPoliticeCheck',
components: { components: {
ListPage,
SearchForm,
TableConfig,
}, },
data() { data() {
return { return {
ruleForm: { constructionTypeOptions: [],
let1: '', selectRows: [],
let2: '',
let3: '',
},
rules: {
},
add_dialog: false,
is_add_edit: 'add',
tableData: [],
loading: false,
search_select1: [],
pager: {
current: 1,
sizes: [10, 20, 50, 100, 200],
size: 10,
total: 20 //总条数
},
tableHeight: null,
searchParams: {
let1: null,
let2: null,
let3: null,
let4: null,
},
fuHeDu: [],
selectRows: []
};
},
mounted(){
window.addEventListener('resize', () => {
this.set_table_height();
})
this.set_table_height();
this.get_table();
this.get_fu_he_du_select().then(res => {
this.fuHeDu = res;
})
},
methods: {
toDetails() {
if(this.selectRows.length == 0) {
Message({
type: 'warning',
message: '请选择一条数据!'
});
return;
}
if(this.selectRows.length >1) {
Message({
type: 'warning',
message: '只能选择一条数据!'
});
return;
}
this.$router.push( `/main/reviewArchiPoliticeCheckDetails`, () => {}, () => {} );
},
select_table_rows(data){//表格的勾选
this.selectRows = data;
},
save_dicy() {//保存字典
this.$refs.form.validate(valid => {
if(valid) {
}else {
return false;
} }
});
}, },
get_fu_he_du_select() {//符合度下拉 computed: {
query() {
return {
url: '/network/ele/',
method: 'post',
queryParam: {
// archiBelongId: this.query_item1,
// current: this.pager.current,
// delFlag: 0,
// elementId: '',
// elementName: this.query_item3,
// pageSize: this.pager.size,
// state: this.query_item4,
},
}
},
formOptions() {
return [
{
label: '单位', // label文字
prop: 'username', // 字段名
element: 'el-input', // 指定elementui组件
initValue: '', // 字段初始值
placeholder: '请输入内容', // elementui组件属性
},
{
label: '部门', // label文字
prop: 'username1', // 字段名
element: 'el-input', // 指定elementui组件
initValue: '', // 字段初始值
placeholder: '请输入内容', // elementui组件属性
},
{
label: '系统名称', // label文字
prop: 'username2', // 字段名
element: 'el-input', // 指定elementui组件
initValue: '', // 字段初始值
placeholder: '请输入内容', // elementui组件属性
},
{
label: '建设类型', // label文字
prop: 'username3', // 字段名
element: 'el-select', // 指定elementui组件
initValue: '', // 字段初始值
placeholder: '请选择', // elementui组件属性
options: this.constructionTypeOptions,
dictType: 'build_type',
},
]
},
columns() {
return [
{ type: 'selection', width: '55px' },
{ label: '序号', type: 'index', width: '80px' },
{ label: '单位', prop: 'elementName' },
{ label: '部门', prop: 'archiLevelName' },
{ label: '系统名称', width: '280px', prop: 'archiBelongName' },
{ label: '建设类型', prop: 'eaLevel' },
{ label: '项目名称', width: '295px', prop: 'content' },
{ label: '是否续建', prop: 'version1' },
{ label: '承建单位', prop: 'version2' },
{
label: '运安符合性审查',
prop: 'version3',
type: 'operation',
actionButtons: [{ title: '查看', type: 'text' }],
callback: (row, title) => {
this.fnToDetailsTab('1')
},
},
{
label: '功能满足审查',
prop: 'version4',
type: 'operation',
actionButtons: [{ title: '查看', type: 'text' }],
callback: (row, title) => {
this.fnToDetailsTab('2')
},
},
{
label: '运行可靠性审查',
prop: 'version5',
type: 'operation',
actionButtons: [{ title: '查看', type: 'text' }],
callback: (row, title) => {
this.fnToDetailsTab('3')
},
},
{
label: '系统实用性审查',
prop: 'version6',
type: 'operation',
actionButtons: [{ title: '查看', type: 'text' }],
callback: (row, title) => {
this.fnToDetailsTab('4')
},
},
{
label: '系统安全性审查',
prop: 'version8',
type: 'operation',
actionButtons: [{ title: '查看', type: 'text' }],
callback: (row, title) => {
this.fnToDetailsTab('5')
},
},
{
label: '资源复用性审查',
prop: 'version7',
type: 'operation',
actionButtons: [{ title: '查看', type: 'text' }],
callback: (row, title) => {
this.fnToDetailsTab('6')
},
},
]
},
},
created() {
const params = { const params = {
key: "tech_compliance" key: 'build_type',
} }
return new Promise((resolve, reject) => { getDianXingAnLiSelectData(params).then((res) => {
getDianXingAnLiSelectData(params).then(res => { if (res.code == 200) {
if(res.code == 200) { this.constructionTypeOptions = res.data
resolve(res.data);
} }
}) })
})
}, },
set_table_height() {//动态设置表格高度 methods: {
const table_container_height = $(".table_container").height(); // 表格勾选的数据
const search_menu_height = $(".search_menu").height(); selectionChange(data) {
const search_btn_height = $(".search_btn").outerHeight(true); this.selectRows = data
this.tableHeight = table_container_height - search_menu_height - search_btn_height - 90 + 'px';
}, },
search_table() {//搜索 querySearch() {
this.pager.current = 1; this.$refs.searchTable.queryData()
this.get_table();
}, },
reset() {//重置 toDetails() {
this.searchParams.let1 = null; if (this.selectRows.length == 0) {
this.searchParams.let2 = null; return this.$message.warning('请选择一条数据')
this.searchParams.let3 = null; }
this.searchParams.let4 = null; if (this.selectRows.length > 1) {
return this.$message.warning('只能选择一条数据')
}
this.$router.push({
path: '/main/reviewArchiPoliticeCheckDetails',
query: {},
})
}, },
// 每页条数改变 // 跳转详情指定tab
handleSizeChange(val) { fnToDetailsTab(name) {
this.pager.current = 1; this.$router.push({
this.pager.size = val; path: '/main/reviewArchiPoliticeCheckDetails',
this.get_table(); query: {
name,
}, },
//当前页码改变 })
handleCurrentChange(val) {
this.pager.current = val;
this.get_table();
}, },
get_table() {//查询表格数据
this.loading = true;
const params = {
"policyName": this.searchParams.let1,
"conformCount": this.searchParams.let2,
"conformCount": this.searchParams.let3,
"conformCount": this.searchParams.let4,
"current": this.pager.current,
"pageSize": this.pager.size,
};
getJiShuZhengCeGuanLianShiYongTable(params).then(res => {
this.loading = false;
console.log(res)
// res.records.map(item => {
// const startTime_year = String(new Date(item.startTime).getFullYear());
// const startTime_month = String(new Date(item.startTime).getMonth() + 1);
// let startTime_day = String(new Date(item.startTime).getDay());
// startTime_day = startTime_day.length == 1 ? '0' + startTime_day : startTime_day;
// item['startTime_'] = startTime_year + '-' + startTime_month + '-' + startTime_day;
// });
// this.get_fu_he_du_select().then(res2 => {
// res.records.map(item3 => {
// let result1 = res2.find(item2 => item2.value == item3.conformCount);
// item3['conformCount_'] = result1 ? result1.label : '';
// });
// this.tableData = res.records;
// })
this.tableData = res.records;
this.pager.current = res.current;
this.pager.total = res.total;
this.pager.size = res.size;
// if(res.code == 200) {
// this.loading = false;
// console.log(res)
// // this.tableData = res.
// }
});
}, },
}
} }
</script> </script>
<style> <style scoped lang="scss">
.confirmClass{ @import '@/styles/common.scss';
background-color: #0D867F !important;
}
.el-message-box__content{
padding: 60px 15px 60px 15px;
}
</style>
<style scoped>
.version_btn{
display: flex;
align-items: center;
justify-content: center;
width: 84px;
height: 32px;
background: rgba(13,134,127,0.1);
border-radius: 6px 6px 6px 6px;
/* border: 1px solid #0D867F; */
font-size: 14px;
color: #0D867F;
cursor: pointer;
margin-left: 15px;
}
.cancel_version_btn{
display: flex;
align-items: center;
justify-content: center;
width: 104px;
height: 32px;
background: rgba(13,134,127,0.1);
border-radius: 6px 6px 6px 6px;
/* border: 1px solid #0D867F; */
font-size: 14px;
color: #0D867F;
cursor: pointer;
margin-left: 15px;
}
.reviewArchiPoliticeCheck{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.el-button--primary{
background: rgba(13,134,127,0.1);
color: #0D867F;
border: 0;
}
/deep/ .el-input-group__append{
background-color: #0D867F;
color: #fff;
cursor: pointer;
}
.search_btn{
width: 100%;
display: flex;
margin-top: 50px;
margin-bottom: 20px;
}
.search_menu{
display: flex;
justify-content: space-between;
margin-bottom: 50px;
}
.search_menu_item_container{
display: flex;
align-items: center;
}
.search_menu_btn_container{
display: flex;
align-items: center;
}
.search_menu_item{
display: flex;
align-items: center;
width: 344px;
}
.search_title{
/* width: 20%; */
flex-shrink: 0;
margin-right: 15px;
}
.search_item{
width: 60%;
}
.query_btn{
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 32px;
background: rgba(13,134,127,1);
border-radius: 6px 6px 6px 6px;
border: 1px solid #0D867F;
font-size: 14px;
color: #fff;
margin-right: 10px;
cursor: pointer;
}
.reset_btn{
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 32px;
background: rgba(244,244,244,1);
border-radius: 6px 6px 6px 6px;
border: 1px solid #ccc;
font-size: 14px;
color: #666;
cursor: pointer;
}
.btn_icon{
margin-right: 10px;
}
.table_container{
width: 97%;
height: calc(100% - 40px);
margin-top: 20px;
}
.el-pagination{
margin-top: 30px;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
background-color: #0D867F;
}
/deep/ .el-dialog__header{
background-color: #0D867F;
text-align: left;
}
/deep/ .el-dialog__title{
color: #fff;
}
/deep/ .el-dialog__close {
color: #fff;
}
.greenButton{
background-color: #0D867F;
color: #fff;
}
.el-form-item{
display: flex;
align-items: center;
width: 33%;
}
</style> </style>
src/views/reviewArchiPoliticeCheck/tab1.vue
<template> <template>
<div class="tab1"> <div class="tab1 flex-column h-100">
<div class="content flex">
<div class="left_container m-r-10 flex-column">
<div class="left_container_title">
<i class="el-icon-caret-right icon"></i>
<span>评审标准</span>
</div>
<div class="left_container_content flex-1">123</div>
</div>
<div class="right_container flex-column">
<div class="right_container_title">
<i class="el-icon-caret-right icon"></i>
<span>评审内容</span>
</div>
<div class="right_container_content flex-1">123</div>
</div>
</div>
<div class="bottom_container">
<div class="flex-b-c p-r-20 m-tb-15">
<div class="flex-c">
<span class="m-r-50 p-l-20 bottom_container_title">评审结果</span>
<div class="label m-r-10">是否满足接入要求:</div>
<el-select v-model="isMeet" class="leftSelect">
<el-option
v-for="item in selectOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</div>
<el-button type="primary" size="medium">保存结果</el-button>
</div>
<el-input
type="textarea"
:rows="4"
v-model="resultContent"
v-no-backslash
class="w-100"
></el-input>
</div>
</div> </div>
</template> </template>
<script> <script>
import { import { getArchiViewManageTable } from '@/api/index.js'
getArchiViewManageTable import { MessageBox, Message } from 'element-ui'
} from '@/api/index.js';
import { MessageBox, Message } from 'element-ui';
export default { export default {
name: 'tab1', name: 'tab1',
components: { components: {},
},
data() { data() {
return { return {
resultContent: '',
}; isMeet: '',
selectOptions: [
{
label: '是',
value: '1',
}, },
mounted(){ {
label: '否',
value: '0',
}, },
methods: { ],
} }
},
mounted() {},
methods: {},
} }
</script> </script>
<style scoped> <style lang="scss" scoped>
@import '@/styles/common.scss';
@import './index.scss';
</style> </style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!