Skip to content

liangzhen / framework-tools-web

Go to a project
Commit c3cad44f by 史敦盼
Options

表单基础封装,批次计划管理初版

1 parent 14e21fd0
Expand all
Inline Side-by-side
Showing with 633 additions and 143 deletions
src/api/interface.js 0 → 100644
// 接口url
// 批量计划管理分页查询
export const batchPlanManagement = '/network/bat-plan-info/'
src/components/Form.vue 0 → 100644
<!--
* @Description: 表单组件
* @Version: 2.0
* @Autor: pan
* @Date: 2024-03-12 14:55:59
* @LastEditors: pan
* @LastEditTime: 2024-03-14 10:33:49
-->
<!-- /**
* 搜索栏公共组件
*/ -->
<template>
<div class="form-box">
<el-form
:model="formData"
ref="formRef"
:label-width="labelWidth"
:label-position="labelPosition"
>
<el-form-item
v-for="(item, index) in formOptions"
:key="newKeys[index]"
:prop="item.prop"
:label="item.label"
:rules="item.rules"
>
<SearchFormItem v-model="formData[item.prop]" :itemOptions="item" />
</el-form-item>
<!-- 自定义插槽，可用于特殊表单块 -->
<slot></slot>
</el-form>
</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 []
},
},
labelWidth: {
type: String,
default: '80px',
},
labelPosition: {
type: String,
default: 'right',
},
},
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(this.formData)
callback()
}
})
},
// 获取表单数据
getData() {
this.onValidate(() => {
this.$emit('getData', 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>
.form-box {
// display: flex;
margin-top: 10px;
.btn-box {
display: flex;
height: 38px;
}
.el-form {
display: flex;
flex-wrap: wrap;
/deep/ .el-form-item__label {
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 {
width: 220px !important;
}
}
}
}
</style>
src/components/SearchForm.vue
......@@ -4,7 +4,7 @@
* @Autor: pan
* @Date: 2024-03-12 14:55:59
* @LastEditors: pan
* @LastEditTime: 2024-03-12 16:14:30
* @LastEditTime: 2024-03-14 08:59:05
-->
<!-- /**
* 搜索栏公共组件
......@@ -12,7 +12,7 @@
<template>
<div class="search-form-box">
<el-form :model="formData" ref="formRef" :inline="true">
<el-row>
<!-- <el-row>
<el-col
:xs="24"
:sm="12"
......@@ -21,17 +21,19 @@
: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>
> -->
<el-form-item
v-for="(item, index) in formOptions"
:key="newKeys[index]"
: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>
......@@ -188,6 +190,7 @@ export default {
// }
}
.el-form {
display: flex;
/deep/ .el-form-item__label {
// padding-right: 0;
margin-bottom: 10px;
......@@ -203,16 +206,19 @@ export default {
}
// el-input宽度
/deep/ .form-item {
> .el-input:not(.el-date-editor) {
max-width: 220px;
.el-input {
width: 220px !important;
}
// > .el-input:not(.el-date-editor) {
// max-width: 220px;
// }
}
/deep/ .el-select {
max-width: 220px;
}
/deep/ .el-cascader {
max-width: 200px;
}
// /deep/ .el-select {
// max-width: 220px;
// }
// /deep/ .el-cascader {
// max-width: 200px;
// }
}
}
</style>
src/components/SearchFormItem.vue
......@@ -78,7 +78,6 @@
v-on="bindEvents"
:type="itemOptions.type"
clearable
value-format="yyyy-MM-dd"
placeholder="请选择日期"
style="width: 300px"
></el-date-picker>
......
src/components/TableConfig.vue
......@@ -4,7 +4,7 @@
* @Autor: pan
* @Date: 2024-03-11 14:53:40
* @LastEditors: pan
* @LastEditTime: 2024-03-12 15:02:11
* @LastEditTime: 2024-03-14 09:46:17
-->
<!-- 示例
columns: [{ label: '头像', prop: 'avatar', align: 'center', __slotName: 'avatar',callback: (row, title) => {
......@@ -71,10 +71,8 @@
class="btn"
v-for="items in item.actionButtons"
:key="items.title"
:type="items.type"
v-bind="items"
@click="item.callback(scope.row, items.title)"
:icon="items.icon"
:circle="items.circle"
><span v-if="!items.circle">{{ items.title }}</span></el-button
>
</template>
......@@ -92,8 +90,8 @@
<slot :name="item.__slotName" :data="scope"></slot>
</template>
<!-- 字典值匹配 如后端给state: 0 页面要渲染成已停用-->
<template v-if="item.collectionType">
<span></span>
<template v-else-if="item.collectionType" #default="scope">
<span> {{ handleToText(item, scope.row[item.prop]) }}</span>
</template>
</el-table-column>
</template>
......@@ -209,6 +207,11 @@ export default {
this.queryData()
},
methods: {
handleToText(item, state) {
console.log(item, state)
const obj = item.options.find((v) => v.value === state) || {}
return obj['label']
},
/**
* 切换分页数量
* @param { Number } pageSize 页数
......@@ -239,7 +242,6 @@ export default {
// param.sortOrder = this.order.sortOrder
// }
let result = null
console.log('param', param)
try {
switch (this.query.method) {
case 'get':
......
src/components/onlyOffice/demo.vue
......@@ -22,7 +22,7 @@ export default {
document: {
fileType: 'doc',
// 给服务端用的唯一id，同一个id就会获取服务器缓存里的文件（有这个key，就会先根据它去缓存里找），这项如果最开始只是先试用，可以先给个空字符串
key: '',
key: '737bb9e67f',
// 文件名
title: 'text.docx',
//相关权限
......
src/styles/elementui.scss 0 → 100644
$color-primary: #0d867f;
/deep/ .el-dialog__header {
background-color: $color-primary;
text-align: left;
padding: 10px 20px;
}
/deep/ .el-dialog__headerbtn {
top: 14px;
}
/deep/ .el-dialog__title {
color: #fff;
}
/deep/ .el-dialog__close {
color: #fff;
}
/deep/ .el-dialog__headerbtn:focus .el-dialog__close,
/deep/ .el-dialog__headerbtn:hover .el-dialog__close {
color: #fff;
}
src/utils/dictionary.js 0 → 100644
// 审批状态
export const approvalStatusOptions = [
{ label: '新建', value: 1 },
{ label: '审批中', value: 2 },
{ label: '审批通过', value: 3 },
{ label: '驳回', value: 4 },
]
src/views/batchPlanManagement/Add.vue 0 → 100644
<template>
<el-dialog
:title="title"
:visible.sync="showDialog"
:close-on-click-modal="false"
width="60%"
>
<div>
<Form
@getData="getFormData"
:form-options="formOptions"
label-width="120px"
></Form>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="showDialog = false" size="mini">取 消</el-button>
<el-button type="primary" @click="handleImport" size="mini"
>提 交</el-button
>
</span></el-dialog
>
</template>
<script>
import Form from '@/components/Form.vue'
export default {
props: {
title: {
type: String,
default: '',
},
visible: {
type: Boolean,
default: false,
},
},
data() {
return {}
},
components: {
Form,
},
computed: {
formOptions() {
return [
{
label: '批次名称', // label文字
prop: 'batName', // 字段名
element: 'el-input', // 指定elementui组件
placeholder: '请输入内容', // elementui组件属性
rules: [],
},
{
label: '创建人', // label文字
prop: 'batName', // 字段名
element: 'el-input', // 指定elementui组件
initValue: '', // 字段初始值
placeholder: '请输入内容', // elementui组件属性
rules: [],
},
{
label: '创建时间', // label文字
prop: 'planReviewDate', // 字段名
type: 'date',
valueFormat: 'yyyy-MM-dd',
element: 'el-date-picker', // 指定elementui组件
initValue: '', // 字段初始值
placeholder: '请选择', // elementui组件属性
},
{
label: '年度', // label文字
prop: 'planReviewDate', // 字段名
type: 'year',
valueFormat: 'yyyy',
element: 'el-date-picker', // 指定elementui组件
initValue: '', // 字段初始值
placeholder: '请选择', // elementui组件属性
},
{
label: '计划评审日期', // label文字
prop: 'planReviewDate', // 字段名
type: 'date',
valueFormat: 'yyyy-MM-dd',
element: 'el-date-picker', // 指定elementui组件
initValue: '', // 字段初始值
placeholder: '请选择', // elementui组件属性
},
{
label: '备注', // label文字
prop: 'planReviewDate', // 字段名
type: 'textarea',
element: 'el-input', // 指定elementui组件
placeholder: '请输入内容', // elementui组件属性
},
]
},
showDialog: {
get() {
return this.visible
},
set(value) {
this.$emit('update:visible', value)
},
},
},
mounted() {},
methods: {
getFormData(formData) {},
},
}
</script>
<style scoped lang="scss">
@import '@/styles/elementui.scss';
</style>
src/views/batchPlanManagement/index.vue 0 → 100644
<template>
<div class="searchTable">
<list-page>
<!-- 查询表单插槽 -->
<template #formWrap>
<SearchForm @onSearch="querySearch" :form-options="formOptions" />
</template>
<!-- 中部操作按钮 -->
<template #operationWrap>
<el-button
icon="el-icon-document-add"
type="primary"
size="medium"
plain
@click="fnAdd()"
>新增</el-button
>
</template>
<!-- 表格插槽 -->
<template #tableWrap>
<table-config
ref="searchTable"
@selection-change="selectionChange"
:query="query"
:columns="columns"
id-key="elementId"
>
</table-config>
</template>
</list-page>
<!-- 新增弹窗 -->
<Add :visible.sync="visible" title="新增批次计划"></Add>
</div>
</template>
<script>
import ListPage from '@/components/ListPage.vue'
import SearchForm from '@/components/SearchForm.vue'
import TableConfig from '@/components/TableConfig.vue'
import Add from './Add.vue'
import { getDianXingAnLiSelectData } from '@/api/index.js'
import { batchPlanManagement } from '@/api/interface'
import { approvalStatusOptions } from '@/utils/dictionary'
export default {
components: {
ListPage,
SearchForm,
TableConfig,
Add,
},
data() {
return {
constructionTypeOptions: [],
selectRows: [],
query: {
url: batchPlanManagement,
method: 'post',
queryParam: {},
},
visible: false,
}
},
computed: {
formOptions() {
return [
{
label: '批次名称', // label文字
prop: 'batName', // 字段名
element: 'el-input', // 指定elementui组件
initValue: '', // 字段初始值
placeholder: '请输入内容', // elementui组件属性
},
{
label: '计划评审日期', // label文字
prop: 'planReviewDate', // 字段名
type: 'date',
valueFormat: 'yyyy-MM-dd',
element: 'el-date-picker', // 指定elementui组件
initValue: '', // 字段初始值
placeholder: '请选择', // elementui组件属性
},
]
},
columns() {
return [
{ label: '序号', type: 'index', width: '80px' },
{ label: '批次年度', prop: 'year' },
{ label: '批次名称', prop: 'batName', width: '300px' },
{
label: '计划评审日期',
width: '120px',
prop: 'planReviewDate',
},
{
label: '状态',
prop: 'state',
width: '120px',
collectionType: 'approvalStatusOptions',
options: approvalStatusOptions,
},
{ label: '备注', width: '100px', prop: 'remark' },
{ label: '创建人', prop: 'createMan' },
{ label: '创建时间', prop: 'createTime', width: '120px' },
{
label: '操作',
type: 'operation',
width: '360px',
actionButtons: [
{
title: '修改',
type: 'primary',
size: 'mini',
plain: true,
icon: 'el-icon-edit',
},
{
title: '删除',
type: 'danger',
size: 'mini',
plain: true,
icon: 'el-icon-delete',
},
{
title: '提交',
size: 'mini',
icon: 'el-icon-circle-check',
type: 'primary',
plain: true,
},
{
title: '审批',
size: 'mini',
icon: 'el-icon-s-check',
type: 'primary',
plain: true,
},
],
callback: (row, title) => {
this.fnToDetailsTab('1')
},
},
]
},
},
created() {
console.log('batchPlanManagement', batchPlanManagement)
const params = {
key: 'build_type',
}
getDianXingAnLiSelectData(params).then((res) => {
if (res.code == 200) {
this.constructionTypeOptions = res.data
}
})
},
methods: {
// 表格勾选的数据
selectionChange(data) {
this.selectRows = data
},
querySearch(data) {
this.query.queryParam = {
...this.query.queryParam,
...data,
}
this.$refs.searchTable.queryData()
},
fnAdd() {
this.visible = true
},
},
}
</script>
<style scoped lang="scss">
@import '@/styles/common.scss';
</style>
src/views/docDemo/index.vue
<template>
<div class="wenDangDemo">
<div id="placeholder"></div>
<div class="office" @click="gotoOffice">
编辑文档
</div>
<!-- <div v-if='show' class='qualityManual-container-office'>
<div class="wenDangDemo">
<div id="placeholder"></div>
<div class="office" @click="gotoOffice">编辑文档</div>
<!-- <div v-if='show' class='qualityManual-container-office'>
<only-Office :option='option' />
</div> -->
</div>
<Demo />
</div>
</template>
<script>
import onlyOffice from '@/components/onlyOffice'
import Demo from '@/components/onlyOffice/demo.vue'
export default {
name: 'wenDangDemo',
components: {
onlyOffice,
},
data() {
return {
config: {
"document": {
"fileType": "docx",
"key": "Khirz6zTPdfd7",
"title": "new.docx",
"url": "http://192.168.0.187:9999/example/editor?fileName=new.docx"
},
"documentType": "word",
'editorConfig': {
//语言：zh-CN简体中文/en英文
'lang': 'zh-CN',
//阅读状态 view/edit
'mode': 'view',
'customization': {
//是否显示插件
'plugins': false,
},
"callbackUrl": "http://192.168.0.187:9999/url-to-callback.ashx"
},
// "token": "CqzsKuP7jlI1aBatn4esS91ysFxDBR",
},
//参考vabOnlyOffice组件参数配置
option: {
url: '',
isEdit: '',
fileType: '',
title: '',
lang: '',
isPrint: '',
},
show: false,
};
},
methods: {
gotoOffice() {
let config = {
"document": {
"fileType": "docx",
"key": "",
// "key": "Khirz6zTPdfd7",
"title": "new.docx",
// "url": "http://192.168.0.189:9999/example/editor?fileName=new.docx"
"url": "http://192.168.0.186:9001/example/editor?fileName=new.docx"
},
"documentType": "word",
'editorConfig': {
//语言：zh-CN简体中文/en英文
'lang': 'zh-CN',
//阅读状态 view/edit
'mode': 'edit',
'customization': {
//是否显示插件
'plugins': false,
},
"callbackUrl": "http://192.168.0.186:9001/example/track?filename=new.docx&useraddress=__1",
// "callbackUrl": "http://192.168.0.186:9001/example/track?filename=new.docx&useraddress=__1",
},
// "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkb2N1bWVudCI6eyJmaWxlVHlwZSI6ImRvY3giLCJrZXkiOiJLaGlyejZ6VFBkZmQ3IiwidGl0bGUiOiJFeGFtcGxlIERvY3VtZW50IFRpdGxlLmRvY3giLCJ1cmwiOiJodHRwczovL2V4YW1wbGUuY29tL3VybC10by1leGFtcGxlLWRvY3VtZW50LmRvY3gifSwiZG9jdW1lbnRUeXBlIjoid29yZCJ9.7IpEJxdOvBQ0kJ8l6ZegIV4tX5vsPbZZCDDVmcFROXc",
};
var docEditor = new DocsAPI.DocEditor("placeholder", config);
},
}
name: 'wenDangDemo',
components: {
Demo,
onlyOffice,
},
data() {
return {
config: {
document: {
fileType: 'docx',
key: 'Khirz6zTPdfd7',
title: 'new.docx',
url: 'http://192.168.0.187:9999/example/editor?fileName=new.docx',
},
documentType: 'word',
editorConfig: {
//语言：zh-CN简体中文/en英文
lang: 'zh-CN',
//阅读状态 view/edit
mode: 'view',
customization: {
//是否显示插件
plugins: false,
},
callbackUrl: 'http://192.168.0.187:9999/url-to-callback.ashx',
},
// "token": "CqzsKuP7jlI1aBatn4esS91ysFxDBR",
},
//参考vabOnlyOffice组件参数配置
option: {
url: '',
isEdit: '',
fileType: '',
title: '',
lang: '',
isPrint: '',
},
show: false,
}
},
methods: {
gotoOffice() {
let config = {
document: {
fileType: 'docx',
key: '',
// "key": "Khirz6zTPdfd7",
title: 'new.docx',
// "url": "http://192.168.0.189:9999/example/editor?fileName=new.docx"
url: 'http://192.168.0.186:9001/example/editor?fileName=new.docx',
},
documentType: 'word',
editorConfig: {
//语言：zh-CN简体中文/en英文
lang: 'zh-CN',
//阅读状态 view/edit
mode: 'edit',
customization: {
//是否显示插件
plugins: false,
},
callbackUrl:
'http://192.168.0.186:9001/example/track?filename=new.docx&useraddress=__1',
// "callbackUrl": "http://192.168.0.186:9001/example/track?filename=new.docx&useraddress=__1",
},
// "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkb2N1bWVudCI6eyJmaWxlVHlwZSI6ImRvY3giLCJrZXkiOiJLaGlyejZ6VFBkZmQ3IiwidGl0bGUiOiJFeGFtcGxlIERvY3VtZW50IFRpdGxlLmRvY3giLCJ1cmwiOiJodHRwczovL2V4YW1wbGUuY29tL3VybC10by1leGFtcGxlLWRvY3VtZW50LmRvY3gifSwiZG9jdW1lbnRUeXBlIjoid29yZCJ9.7IpEJxdOvBQ0kJ8l6ZegIV4tX5vsPbZZCDDVmcFROXc",
}
var docEditor = new DocsAPI.DocEditor('placeholder', config)
},
},
}
</script>
<style scoped >
.wenDangDemo{
width: 100%;
height: 100%;
}
.office{
color: black;
font-size: 20px;
cursor: pointer;
}
.qualityManual-container-office {
height: 100%;
width: 100%;
padding: 0 !important;
}
</style>
\ No newline at end of file
<style scoped>
.wenDangDemo {
width: 100%;
height: 100%;
}
.office {
color: black;
font-size: 20px;
cursor: pointer;
}
.qualityManual-container-office {
height: 100%;
width: 100%;
padding: 0 !important;
}
</style>
src/views/reviewArchiPoliticeCheck/index.vue
......@@ -33,6 +33,7 @@ import TableConfig from '@/components/TableConfig.vue'
import { getDianXingAnLiSelectData } from '@/api/index.js'
export default {
name: 'batchPlanManagement',
components: {
ListPage,
SearchForm,
......@@ -42,24 +43,14 @@ export default {
return {
constructionTypeOptions: [],
selectRows: [],
query: {
url: '/network/ele/',
method: 'post',
queryParam: {},
},
}
},
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 [
{
......@@ -177,7 +168,11 @@ export default {
selectionChange(data) {
this.selectRows = data
},
querySearch() {
querySearch(data) {
this.query.queryParam = {
...this.query.queryParam,
...data,
}
this.$refs.searchTable.queryData()
},
toDetails() {
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!