diff --git a/package.json b/package.json index 3a8ab01..f09aaa1 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "path-browserify": "^1.0.1", "path-to-regexp": "^6.2.1", "pinia": "^2.0.23", + "print-js": "^1.6.0", "qrcode": "^1.5.1", "qs": "^6.11.0", "tinymce": "^6.2.0", diff --git a/package.json b/package.json index 3a8ab01..f09aaa1 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "path-browserify": "^1.0.1", "path-to-regexp": "^6.2.1", "pinia": "^2.0.23", + "print-js": "^1.6.0", "qrcode": "^1.5.1", "qs": "^6.11.0", "tinymce": "^6.2.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4d7d6ec..f1b9176 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -42,6 +42,7 @@ pinia: ^2.0.23 plop: ^3.1.1 postcss-html: ^1.5.0 + print-js: ^1.6.0 qrcode: ^1.5.1 qs: ^6.11.0 sass: ^1.56.1 @@ -94,6 +95,7 @@ path-browserify: 1.0.1 path-to-regexp: 6.2.1 pinia: 2.0.23_d45o5shxrtvj6wh4y524t7cqnm + print-js: registry.npmmirror.com/print-js/1.6.0 qrcode: registry.npmmirror.com/qrcode/1.5.1 qs: 6.11.0 tinymce: 6.2.0 @@ -8769,6 +8771,12 @@ engines: {node: '>=10.13.0'} dev: false + registry.npmmirror.com/print-js/1.6.0: + resolution: {integrity: sha512-BfnOIzSKbqGRtO4o0rnj/K3681BSd2QUrsIZy/+WdCIugjIswjmx3lDEZpXB2ruGf9d4b3YNINri81+J0FsBWg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/print-js/-/print-js-1.6.0.tgz} + name: print-js + version: 1.6.0 + dev: false + registry.npmmirror.com/qrcode/1.5.1: resolution: {integrity: sha512-nS8NJ1Z3md8uTjKtP+SGGhfqmTCs5flU/xR623oI0JX+Wepz9R8UrRVCTBTJm3qGw3rH6jJ6MUHjkDx15cxSSg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/qrcode/-/qrcode-1.5.1.tgz} name: qrcode diff --git a/package.json b/package.json index 3a8ab01..f09aaa1 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "path-browserify": "^1.0.1", "path-to-regexp": "^6.2.1", "pinia": "^2.0.23", + "print-js": "^1.6.0", "qrcode": "^1.5.1", "qs": "^6.11.0", "tinymce": "^6.2.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4d7d6ec..f1b9176 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -42,6 +42,7 @@ pinia: ^2.0.23 plop: ^3.1.1 postcss-html: ^1.5.0 + print-js: ^1.6.0 qrcode: ^1.5.1 qs: ^6.11.0 sass: ^1.56.1 @@ -94,6 +95,7 @@ path-browserify: 1.0.1 path-to-regexp: 6.2.1 pinia: 2.0.23_d45o5shxrtvj6wh4y524t7cqnm + print-js: registry.npmmirror.com/print-js/1.6.0 qrcode: registry.npmmirror.com/qrcode/1.5.1 qs: 6.11.0 tinymce: 6.2.0 @@ -8769,6 +8771,12 @@ engines: {node: '>=10.13.0'} dev: false + registry.npmmirror.com/print-js/1.6.0: + resolution: {integrity: sha512-BfnOIzSKbqGRtO4o0rnj/K3681BSd2QUrsIZy/+WdCIugjIswjmx3lDEZpXB2ruGf9d4b3YNINri81+J0FsBWg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/print-js/-/print-js-1.6.0.tgz} + name: print-js + version: 1.6.0 + dev: false + registry.npmmirror.com/qrcode/1.5.1: resolution: {integrity: sha512-nS8NJ1Z3md8uTjKtP+SGGhfqmTCs5flU/xR623oI0JX+Wepz9R8UrRVCTBTJm3qGw3rH6jJ6MUHjkDx15cxSSg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/qrcode/-/qrcode-1.5.1.tgz} name: qrcode diff --git a/src/api/measure/source.ts b/src/api/measure/source.ts index 1b8bf27..e447f41 100644 --- a/src/api/measure/source.ts +++ b/src/api/measure/source.ts @@ -64,8 +64,8 @@ }) } -// 导出详情 -export function getSoucreLisListExport(data: object) { +// 导出列表 +export function exportSourceList(data: { businessContent: string; supplierName: string; supplierNo: string; ids: string[] }) { return request({ url: `${prefix}/supplier/listExport`, method: 'post', diff --git a/package.json b/package.json index 3a8ab01..f09aaa1 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "path-browserify": "^1.0.1", "path-to-regexp": "^6.2.1", "pinia": "^2.0.23", + "print-js": "^1.6.0", "qrcode": "^1.5.1", "qs": "^6.11.0", "tinymce": "^6.2.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4d7d6ec..f1b9176 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -42,6 +42,7 @@ pinia: ^2.0.23 plop: ^3.1.1 postcss-html: ^1.5.0 + print-js: ^1.6.0 qrcode: ^1.5.1 qs: ^6.11.0 sass: ^1.56.1 @@ -94,6 +95,7 @@ path-browserify: 1.0.1 path-to-regexp: 6.2.1 pinia: 2.0.23_d45o5shxrtvj6wh4y524t7cqnm + print-js: registry.npmmirror.com/print-js/1.6.0 qrcode: registry.npmmirror.com/qrcode/1.5.1 qs: 6.11.0 tinymce: 6.2.0 @@ -8769,6 +8771,12 @@ engines: {node: '>=10.13.0'} dev: false + registry.npmmirror.com/print-js/1.6.0: + resolution: {integrity: sha512-BfnOIzSKbqGRtO4o0rnj/K3681BSd2QUrsIZy/+WdCIugjIswjmx3lDEZpXB2ruGf9d4b3YNINri81+J0FsBWg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/print-js/-/print-js-1.6.0.tgz} + name: print-js + version: 1.6.0 + dev: false + registry.npmmirror.com/qrcode/1.5.1: resolution: {integrity: sha512-nS8NJ1Z3md8uTjKtP+SGGhfqmTCs5flU/xR623oI0JX+Wepz9R8UrRVCTBTJm3qGw3rH6jJ6MUHjkDx15cxSSg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/qrcode/-/qrcode-1.5.1.tgz} name: qrcode diff --git a/src/api/measure/source.ts b/src/api/measure/source.ts index 1b8bf27..e447f41 100644 --- a/src/api/measure/source.ts +++ b/src/api/measure/source.ts @@ -64,8 +64,8 @@ }) } -// 导出详情 -export function getSoucreLisListExport(data: object) { +// 导出列表 +export function exportSourceList(data: { businessContent: string; supplierName: string; supplierNo: string; ids: string[] }) { return request({ url: `${prefix}/supplier/listExport`, method: 'post', diff --git a/src/assets/styles/globals.scss b/src/assets/styles/globals.scss index 0ea0555..8960267 100644 --- a/src/assets/styles/globals.scss +++ b/src/assets/styles/globals.scss @@ -122,3 +122,17 @@ .full-width-input { width: 100% !important; } + +// 详情页面输入框样式调整, 背景白,字体加深,悬停显示输入字符 +.detail-input.is-disabled .el-input__wrapper { + background-color: #fff; +} + +.detail-input.is-disabled .el-input__inner { + color: var(--el-text-color-regular); + -webkit-text-fill-color: var(--el-text-color-regular); + + &:hover { + cursor: text; + } +} diff --git a/package.json b/package.json index 3a8ab01..f09aaa1 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "path-browserify": "^1.0.1", "path-to-regexp": "^6.2.1", "pinia": "^2.0.23", + "print-js": "^1.6.0", "qrcode": "^1.5.1", "qs": "^6.11.0", "tinymce": "^6.2.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4d7d6ec..f1b9176 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -42,6 +42,7 @@ pinia: ^2.0.23 plop: ^3.1.1 postcss-html: ^1.5.0 + print-js: ^1.6.0 qrcode: ^1.5.1 qs: ^6.11.0 sass: ^1.56.1 @@ -94,6 +95,7 @@ path-browserify: 1.0.1 path-to-regexp: 6.2.1 pinia: 2.0.23_d45o5shxrtvj6wh4y524t7cqnm + print-js: registry.npmmirror.com/print-js/1.6.0 qrcode: registry.npmmirror.com/qrcode/1.5.1 qs: 6.11.0 tinymce: 6.2.0 @@ -8769,6 +8771,12 @@ engines: {node: '>=10.13.0'} dev: false + registry.npmmirror.com/print-js/1.6.0: + resolution: {integrity: sha512-BfnOIzSKbqGRtO4o0rnj/K3681BSd2QUrsIZy/+WdCIugjIswjmx3lDEZpXB2ruGf9d4b3YNINri81+J0FsBWg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/print-js/-/print-js-1.6.0.tgz} + name: print-js + version: 1.6.0 + dev: false + registry.npmmirror.com/qrcode/1.5.1: resolution: {integrity: sha512-nS8NJ1Z3md8uTjKtP+SGGhfqmTCs5flU/xR623oI0JX+Wepz9R8UrRVCTBTJm3qGw3rH6jJ6MUHjkDx15cxSSg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/qrcode/-/qrcode-1.5.1.tgz} name: qrcode diff --git a/src/api/measure/source.ts b/src/api/measure/source.ts index 1b8bf27..e447f41 100644 --- a/src/api/measure/source.ts +++ b/src/api/measure/source.ts @@ -64,8 +64,8 @@ }) } -// 导出详情 -export function getSoucreLisListExport(data: object) { +// 导出列表 +export function exportSourceList(data: { businessContent: string; supplierName: string; supplierNo: string; ids: string[] }) { return request({ url: `${prefix}/supplier/listExport`, method: 'post', diff --git a/src/assets/styles/globals.scss b/src/assets/styles/globals.scss index 0ea0555..8960267 100644 --- a/src/assets/styles/globals.scss +++ b/src/assets/styles/globals.scss @@ -122,3 +122,17 @@ .full-width-input { width: 100% !important; } + +// 详情页面输入框样式调整, 背景白,字体加深,悬停显示输入字符 +.detail-input.is-disabled .el-input__wrapper { + background-color: #fff; +} + +.detail-input.is-disabled .el-input__inner { + color: var(--el-text-color-regular); + -webkit-text-fill-color: var(--el-text-color-regular); + + &:hover { + cursor: text; + } +} diff --git a/src/components/QrDialog/index.vue b/src/components/QrDialog/index.vue index 317927e..defb488 100644 --- a/src/components/QrDialog/index.vue +++ b/src/components/QrDialog/index.vue @@ -128,6 +128,9 @@ font-weight: bold; font-size: 30px; margin-top: 60px; + display: block; + height: auto; + overflow: hidden; .canvas { width: 50vw; diff --git a/package.json b/package.json index 3a8ab01..f09aaa1 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "path-browserify": "^1.0.1", "path-to-regexp": "^6.2.1", "pinia": "^2.0.23", + "print-js": "^1.6.0", "qrcode": "^1.5.1", "qs": "^6.11.0", "tinymce": "^6.2.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4d7d6ec..f1b9176 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -42,6 +42,7 @@ pinia: ^2.0.23 plop: ^3.1.1 postcss-html: ^1.5.0 + print-js: ^1.6.0 qrcode: ^1.5.1 qs: ^6.11.0 sass: ^1.56.1 @@ -94,6 +95,7 @@ path-browserify: 1.0.1 path-to-regexp: 6.2.1 pinia: 2.0.23_d45o5shxrtvj6wh4y524t7cqnm + print-js: registry.npmmirror.com/print-js/1.6.0 qrcode: registry.npmmirror.com/qrcode/1.5.1 qs: 6.11.0 tinymce: 6.2.0 @@ -8769,6 +8771,12 @@ engines: {node: '>=10.13.0'} dev: false + registry.npmmirror.com/print-js/1.6.0: + resolution: {integrity: sha512-BfnOIzSKbqGRtO4o0rnj/K3681BSd2QUrsIZy/+WdCIugjIswjmx3lDEZpXB2ruGf9d4b3YNINri81+J0FsBWg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/print-js/-/print-js-1.6.0.tgz} + name: print-js + version: 1.6.0 + dev: false + registry.npmmirror.com/qrcode/1.5.1: resolution: {integrity: sha512-nS8NJ1Z3md8uTjKtP+SGGhfqmTCs5flU/xR623oI0JX+Wepz9R8UrRVCTBTJm3qGw3rH6jJ6MUHjkDx15cxSSg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/qrcode/-/qrcode-1.5.1.tgz} name: qrcode diff --git a/src/api/measure/source.ts b/src/api/measure/source.ts index 1b8bf27..e447f41 100644 --- a/src/api/measure/source.ts +++ b/src/api/measure/source.ts @@ -64,8 +64,8 @@ }) } -// 导出详情 -export function getSoucreLisListExport(data: object) { +// 导出列表 +export function exportSourceList(data: { businessContent: string; supplierName: string; supplierNo: string; ids: string[] }) { return request({ url: `${prefix}/supplier/listExport`, method: 'post', diff --git a/src/assets/styles/globals.scss b/src/assets/styles/globals.scss index 0ea0555..8960267 100644 --- a/src/assets/styles/globals.scss +++ b/src/assets/styles/globals.scss @@ -122,3 +122,17 @@ .full-width-input { width: 100% !important; } + +// 详情页面输入框样式调整, 背景白,字体加深,悬停显示输入字符 +.detail-input.is-disabled .el-input__wrapper { + background-color: #fff; +} + +.detail-input.is-disabled .el-input__inner { + color: var(--el-text-color-regular); + -webkit-text-fill-color: var(--el-text-color-regular); + + &:hover { + cursor: text; + } +} diff --git a/src/components/QrDialog/index.vue b/src/components/QrDialog/index.vue index 317927e..defb488 100644 --- a/src/components/QrDialog/index.vue +++ b/src/components/QrDialog/index.vue @@ -128,6 +128,9 @@ font-weight: bold; font-size: 30px; margin-top: 60px; + display: block; + height: auto; + overflow: hidden; .canvas { width: 50vw; diff --git a/src/utils/printUtils.ts b/src/utils/printUtils.ts new file mode 100644 index 0000000..8c71409 --- /dev/null +++ b/src/utils/printUtils.ts @@ -0,0 +1,53 @@ +import printJS from 'print-js' +// JSON表头配置项 +interface IJsonPropertie { + field: string // 字段名 + displayName: string // 要显示的中文名 + columnSize?: string // 列宽度,非必填 +} +/** + * 打印HTML元素 + * @param element 元素id + * @param header 打印标题 + * @param style 打印样式 + * @param ignoreElements 忽略元素id列表 + */ +export function printHtml(element: string, header?: string, style?: string, ignoreElements?: string[]) { + printJS({ + printable: element, // 标签元素id + type: 'html', // 打印类型 + header: `

${header}

`, // '标题', + targetStyles: ['*'], // 默认情况下,库仅在打印 HTML 元素时处理某些样式。此选项允许您传递要处理的样式数组。例如:[‘padding-top’, ‘border-bottom’] + style: style || '@page {margin:0 10mm};', // 可选-打印时去掉眉页眉尾 + ignoreElements: ignoreElements || [], // 传入打印父 html 元素时应忽略的 html id 数组。使其不打印。 + }) +} + +export function printJSON(jsonData: Array | Object, properties: IJsonPropertie[], header?: string, style?: string, gridHeaderStyle?: string, gridStyle?: string) { + printJS({ + printable: jsonData, // json 数据对象 + type: 'json', + properties, + header: `

${header}

`, // '表单', + style: style || '', // 可选-打印时去掉眉页眉尾 + gridHeaderStyle: gridHeaderStyle || 'border: 1px solid #000;text-align:center', + gridStyle: gridStyle || 'border: 1px solid #000;text-align:center', + }) +} + +/** + * 打印图片 + * @param element 元素id + * @param header 打印标题 + * @param style 打印样式 + * @param ignoreElements 忽略元素id列表 + */ +export function printImage(image: string, header?: string, style?: string) { + printJS({ + printable: image, // 标签元素id + type: 'image', // 打印类型 + header: `

${header}

`, // '标题', + targetStyles: ['*'], // 默认情况下,库仅在打印 HTML 元素时处理某些样式。此选项允许您传递要处理的样式数组。例如:[‘padding-top’, ‘border-bottom’] + style: style || '@page {margin:0 10mm};', // 可选-打印时去掉眉页眉尾 + }) +} diff --git a/package.json b/package.json index 3a8ab01..f09aaa1 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "path-browserify": "^1.0.1", "path-to-regexp": "^6.2.1", "pinia": "^2.0.23", + "print-js": "^1.6.0", "qrcode": "^1.5.1", "qs": "^6.11.0", "tinymce": "^6.2.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4d7d6ec..f1b9176 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -42,6 +42,7 @@ pinia: ^2.0.23 plop: ^3.1.1 postcss-html: ^1.5.0 + print-js: ^1.6.0 qrcode: ^1.5.1 qs: ^6.11.0 sass: ^1.56.1 @@ -94,6 +95,7 @@ path-browserify: 1.0.1 path-to-regexp: 6.2.1 pinia: 2.0.23_d45o5shxrtvj6wh4y524t7cqnm + print-js: registry.npmmirror.com/print-js/1.6.0 qrcode: registry.npmmirror.com/qrcode/1.5.1 qs: 6.11.0 tinymce: 6.2.0 @@ -8769,6 +8771,12 @@ engines: {node: '>=10.13.0'} dev: false + registry.npmmirror.com/print-js/1.6.0: + resolution: {integrity: sha512-BfnOIzSKbqGRtO4o0rnj/K3681BSd2QUrsIZy/+WdCIugjIswjmx3lDEZpXB2ruGf9d4b3YNINri81+J0FsBWg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/print-js/-/print-js-1.6.0.tgz} + name: print-js + version: 1.6.0 + dev: false + registry.npmmirror.com/qrcode/1.5.1: resolution: {integrity: sha512-nS8NJ1Z3md8uTjKtP+SGGhfqmTCs5flU/xR623oI0JX+Wepz9R8UrRVCTBTJm3qGw3rH6jJ6MUHjkDx15cxSSg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/qrcode/-/qrcode-1.5.1.tgz} name: qrcode diff --git a/src/api/measure/source.ts b/src/api/measure/source.ts index 1b8bf27..e447f41 100644 --- a/src/api/measure/source.ts +++ b/src/api/measure/source.ts @@ -64,8 +64,8 @@ }) } -// 导出详情 -export function getSoucreLisListExport(data: object) { +// 导出列表 +export function exportSourceList(data: { businessContent: string; supplierName: string; supplierNo: string; ids: string[] }) { return request({ url: `${prefix}/supplier/listExport`, method: 'post', diff --git a/src/assets/styles/globals.scss b/src/assets/styles/globals.scss index 0ea0555..8960267 100644 --- a/src/assets/styles/globals.scss +++ b/src/assets/styles/globals.scss @@ -122,3 +122,17 @@ .full-width-input { width: 100% !important; } + +// 详情页面输入框样式调整, 背景白,字体加深,悬停显示输入字符 +.detail-input.is-disabled .el-input__wrapper { + background-color: #fff; +} + +.detail-input.is-disabled .el-input__inner { + color: var(--el-text-color-regular); + -webkit-text-fill-color: var(--el-text-color-regular); + + &:hover { + cursor: text; + } +} diff --git a/src/components/QrDialog/index.vue b/src/components/QrDialog/index.vue index 317927e..defb488 100644 --- a/src/components/QrDialog/index.vue +++ b/src/components/QrDialog/index.vue @@ -128,6 +128,9 @@ font-weight: bold; font-size: 30px; margin-top: 60px; + display: block; + height: auto; + overflow: hidden; .canvas { width: 50vw; diff --git a/src/utils/printUtils.ts b/src/utils/printUtils.ts new file mode 100644 index 0000000..8c71409 --- /dev/null +++ b/src/utils/printUtils.ts @@ -0,0 +1,53 @@ +import printJS from 'print-js' +// JSON表头配置项 +interface IJsonPropertie { + field: string // 字段名 + displayName: string // 要显示的中文名 + columnSize?: string // 列宽度,非必填 +} +/** + * 打印HTML元素 + * @param element 元素id + * @param header 打印标题 + * @param style 打印样式 + * @param ignoreElements 忽略元素id列表 + */ +export function printHtml(element: string, header?: string, style?: string, ignoreElements?: string[]) { + printJS({ + printable: element, // 标签元素id + type: 'html', // 打印类型 + header: `

${header}

`, // '标题', + targetStyles: ['*'], // 默认情况下,库仅在打印 HTML 元素时处理某些样式。此选项允许您传递要处理的样式数组。例如:[‘padding-top’, ‘border-bottom’] + style: style || '@page {margin:0 10mm};', // 可选-打印时去掉眉页眉尾 + ignoreElements: ignoreElements || [], // 传入打印父 html 元素时应忽略的 html id 数组。使其不打印。 + }) +} + +export function printJSON(jsonData: Array | Object, properties: IJsonPropertie[], header?: string, style?: string, gridHeaderStyle?: string, gridStyle?: string) { + printJS({ + printable: jsonData, // json 数据对象 + type: 'json', + properties, + header: `

${header}

`, // '表单', + style: style || '', // 可选-打印时去掉眉页眉尾 + gridHeaderStyle: gridHeaderStyle || 'border: 1px solid #000;text-align:center', + gridStyle: gridStyle || 'border: 1px solid #000;text-align:center', + }) +} + +/** + * 打印图片 + * @param element 元素id + * @param header 打印标题 + * @param style 打印样式 + * @param ignoreElements 忽略元素id列表 + */ +export function printImage(image: string, header?: string, style?: string) { + printJS({ + printable: image, // 标签元素id + type: 'image', // 打印类型 + header: `

${header}

`, // '标题', + targetStyles: ['*'], // 默认情况下,库仅在打印 HTML 元素时处理某些样式。此选项允许您传递要处理的样式数组。例如:[‘padding-top’, ‘border-bottom’] + style: style || '@page {margin:0 10mm};', // 可选-打印时去掉眉页眉尾 + }) +} diff --git a/src/views/measure/source/components/baseInfoDetail.vue b/src/views/measure/source/components/baseInfoDetail.vue new file mode 100644 index 0000000..7e67094 --- /dev/null +++ b/src/views/measure/source/components/baseInfoDetail.vue @@ -0,0 +1,309 @@ + + + + diff --git a/package.json b/package.json index 3a8ab01..f09aaa1 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "path-browserify": "^1.0.1", "path-to-regexp": "^6.2.1", "pinia": "^2.0.23", + "print-js": "^1.6.0", "qrcode": "^1.5.1", "qs": "^6.11.0", "tinymce": "^6.2.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4d7d6ec..f1b9176 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -42,6 +42,7 @@ pinia: ^2.0.23 plop: ^3.1.1 postcss-html: ^1.5.0 + print-js: ^1.6.0 qrcode: ^1.5.1 qs: ^6.11.0 sass: ^1.56.1 @@ -94,6 +95,7 @@ path-browserify: 1.0.1 path-to-regexp: 6.2.1 pinia: 2.0.23_d45o5shxrtvj6wh4y524t7cqnm + print-js: registry.npmmirror.com/print-js/1.6.0 qrcode: registry.npmmirror.com/qrcode/1.5.1 qs: 6.11.0 tinymce: 6.2.0 @@ -8769,6 +8771,12 @@ engines: {node: '>=10.13.0'} dev: false + registry.npmmirror.com/print-js/1.6.0: + resolution: {integrity: sha512-BfnOIzSKbqGRtO4o0rnj/K3681BSd2QUrsIZy/+WdCIugjIswjmx3lDEZpXB2ruGf9d4b3YNINri81+J0FsBWg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/print-js/-/print-js-1.6.0.tgz} + name: print-js + version: 1.6.0 + dev: false + registry.npmmirror.com/qrcode/1.5.1: resolution: {integrity: sha512-nS8NJ1Z3md8uTjKtP+SGGhfqmTCs5flU/xR623oI0JX+Wepz9R8UrRVCTBTJm3qGw3rH6jJ6MUHjkDx15cxSSg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/qrcode/-/qrcode-1.5.1.tgz} name: qrcode diff --git a/src/api/measure/source.ts b/src/api/measure/source.ts index 1b8bf27..e447f41 100644 --- a/src/api/measure/source.ts +++ b/src/api/measure/source.ts @@ -64,8 +64,8 @@ }) } -// 导出详情 -export function getSoucreLisListExport(data: object) { +// 导出列表 +export function exportSourceList(data: { businessContent: string; supplierName: string; supplierNo: string; ids: string[] }) { return request({ url: `${prefix}/supplier/listExport`, method: 'post', diff --git a/src/assets/styles/globals.scss b/src/assets/styles/globals.scss index 0ea0555..8960267 100644 --- a/src/assets/styles/globals.scss +++ b/src/assets/styles/globals.scss @@ -122,3 +122,17 @@ .full-width-input { width: 100% !important; } + +// 详情页面输入框样式调整, 背景白,字体加深,悬停显示输入字符 +.detail-input.is-disabled .el-input__wrapper { + background-color: #fff; +} + +.detail-input.is-disabled .el-input__inner { + color: var(--el-text-color-regular); + -webkit-text-fill-color: var(--el-text-color-regular); + + &:hover { + cursor: text; + } +} diff --git a/src/components/QrDialog/index.vue b/src/components/QrDialog/index.vue index 317927e..defb488 100644 --- a/src/components/QrDialog/index.vue +++ b/src/components/QrDialog/index.vue @@ -128,6 +128,9 @@ font-weight: bold; font-size: 30px; margin-top: 60px; + display: block; + height: auto; + overflow: hidden; .canvas { width: 50vw; diff --git a/src/utils/printUtils.ts b/src/utils/printUtils.ts new file mode 100644 index 0000000..8c71409 --- /dev/null +++ b/src/utils/printUtils.ts @@ -0,0 +1,53 @@ +import printJS from 'print-js' +// JSON表头配置项 +interface IJsonPropertie { + field: string // 字段名 + displayName: string // 要显示的中文名 + columnSize?: string // 列宽度,非必填 +} +/** + * 打印HTML元素 + * @param element 元素id + * @param header 打印标题 + * @param style 打印样式 + * @param ignoreElements 忽略元素id列表 + */ +export function printHtml(element: string, header?: string, style?: string, ignoreElements?: string[]) { + printJS({ + printable: element, // 标签元素id + type: 'html', // 打印类型 + header: `

${header}

`, // '标题', + targetStyles: ['*'], // 默认情况下,库仅在打印 HTML 元素时处理某些样式。此选项允许您传递要处理的样式数组。例如:[‘padding-top’, ‘border-bottom’] + style: style || '@page {margin:0 10mm};', // 可选-打印时去掉眉页眉尾 + ignoreElements: ignoreElements || [], // 传入打印父 html 元素时应忽略的 html id 数组。使其不打印。 + }) +} + +export function printJSON(jsonData: Array | Object, properties: IJsonPropertie[], header?: string, style?: string, gridHeaderStyle?: string, gridStyle?: string) { + printJS({ + printable: jsonData, // json 数据对象 + type: 'json', + properties, + header: `

${header}

`, // '表单', + style: style || '', // 可选-打印时去掉眉页眉尾 + gridHeaderStyle: gridHeaderStyle || 'border: 1px solid #000;text-align:center', + gridStyle: gridStyle || 'border: 1px solid #000;text-align:center', + }) +} + +/** + * 打印图片 + * @param element 元素id + * @param header 打印标题 + * @param style 打印样式 + * @param ignoreElements 忽略元素id列表 + */ +export function printImage(image: string, header?: string, style?: string) { + printJS({ + printable: image, // 标签元素id + type: 'image', // 打印类型 + header: `

${header}

`, // '标题', + targetStyles: ['*'], // 默认情况下,库仅在打印 HTML 元素时处理某些样式。此选项允许您传递要处理的样式数组。例如:[‘padding-top’, ‘border-bottom’] + style: style || '@page {margin:0 10mm};', // 可选-打印时去掉眉页眉尾 + }) +} diff --git a/src/views/measure/source/components/baseInfoDetail.vue b/src/views/measure/source/components/baseInfoDetail.vue new file mode 100644 index 0000000..7e67094 --- /dev/null +++ b/src/views/measure/source/components/baseInfoDetail.vue @@ -0,0 +1,309 @@ + + + + diff --git a/src/views/measure/source/components/sourceApprovalDetail.vue b/src/views/measure/source/components/sourceApprovalDetail.vue index 28cd56c..7b0fc62 100644 --- a/src/views/measure/source/components/sourceApprovalDetail.vue +++ b/src/views/measure/source/components/sourceApprovalDetail.vue @@ -3,13 +3,10 @@ import { reactive, ref } from 'vue' import type { Ref } from 'vue' import { ElMessage, ElMessageBox } from 'element-plus' -import type { FormInstance, UploadInstance, UploadProps, UploadUserFile } from 'element-plus' +import type { FormInstance, UploadUserFile } from 'element-plus' import type { IButton, ISupplier, traceSupplierPerson } from '../list_interface' -import ManageBox from './manageBox.vue' -import showPhoto from '@/views/system/tool/showPhoto.vue' -import { exportFile } from '@/utils/exportUtils' -import { UploadFile } from '@/api/measure/file' -import { getSoucreLisListExport, getSoucreLisUpdate, getSoucreListDetail, getSoucreListlevelType } from '@/api/measure/source' +import baseInfoDetail from './baseInfoDetail.vue' +import { getSoucreListDetail, getSoucreListlevelType } from '@/api/measure/source' import { submitApproval } from '@/api/approval' const loading = ref(false) // 表单加载状态 const infoId = ref('') // id @@ -207,16 +204,16 @@ } const approvalDialog = ref() // 点击数据后的操作按钮 -const clickBtn = (row: ISupplier, buttonType: string) => { +const clickBtn = (buttonType: string) => { switch (buttonType) { case '同意': - approvalDialog.value.initDialog('agree', row.taskId) + approvalDialog.value.initDialog('agree', dataForm.value.taskId) break case '驳回': - approvalDialog.value.initDialog('reject', row.taskId) + approvalDialog.value.initDialog('reject', dataForm.value.taskId) break case '拒绝': - approvalDialog.value.initDialog('refuse', row.taskId) + approvalDialog.value.initDialog('refuse', dataForm.value.taskId) break case '取消': handleCancel() @@ -229,287 +226,14 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + diff --git a/package.json b/package.json index 3a8ab01..f09aaa1 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "path-browserify": "^1.0.1", "path-to-regexp": "^6.2.1", "pinia": "^2.0.23", + "print-js": "^1.6.0", "qrcode": "^1.5.1", "qs": "^6.11.0", "tinymce": "^6.2.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4d7d6ec..f1b9176 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -42,6 +42,7 @@ pinia: ^2.0.23 plop: ^3.1.1 postcss-html: ^1.5.0 + print-js: ^1.6.0 qrcode: ^1.5.1 qs: ^6.11.0 sass: ^1.56.1 @@ -94,6 +95,7 @@ path-browserify: 1.0.1 path-to-regexp: 6.2.1 pinia: 2.0.23_d45o5shxrtvj6wh4y524t7cqnm + print-js: registry.npmmirror.com/print-js/1.6.0 qrcode: registry.npmmirror.com/qrcode/1.5.1 qs: 6.11.0 tinymce: 6.2.0 @@ -8769,6 +8771,12 @@ engines: {node: '>=10.13.0'} dev: false + registry.npmmirror.com/print-js/1.6.0: + resolution: {integrity: sha512-BfnOIzSKbqGRtO4o0rnj/K3681BSd2QUrsIZy/+WdCIugjIswjmx3lDEZpXB2ruGf9d4b3YNINri81+J0FsBWg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/print-js/-/print-js-1.6.0.tgz} + name: print-js + version: 1.6.0 + dev: false + registry.npmmirror.com/qrcode/1.5.1: resolution: {integrity: sha512-nS8NJ1Z3md8uTjKtP+SGGhfqmTCs5flU/xR623oI0JX+Wepz9R8UrRVCTBTJm3qGw3rH6jJ6MUHjkDx15cxSSg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/qrcode/-/qrcode-1.5.1.tgz} name: qrcode diff --git a/src/api/measure/source.ts b/src/api/measure/source.ts index 1b8bf27..e447f41 100644 --- a/src/api/measure/source.ts +++ b/src/api/measure/source.ts @@ -64,8 +64,8 @@ }) } -// 导出详情 -export function getSoucreLisListExport(data: object) { +// 导出列表 +export function exportSourceList(data: { businessContent: string; supplierName: string; supplierNo: string; ids: string[] }) { return request({ url: `${prefix}/supplier/listExport`, method: 'post', diff --git a/src/assets/styles/globals.scss b/src/assets/styles/globals.scss index 0ea0555..8960267 100644 --- a/src/assets/styles/globals.scss +++ b/src/assets/styles/globals.scss @@ -122,3 +122,17 @@ .full-width-input { width: 100% !important; } + +// 详情页面输入框样式调整, 背景白,字体加深,悬停显示输入字符 +.detail-input.is-disabled .el-input__wrapper { + background-color: #fff; +} + +.detail-input.is-disabled .el-input__inner { + color: var(--el-text-color-regular); + -webkit-text-fill-color: var(--el-text-color-regular); + + &:hover { + cursor: text; + } +} diff --git a/src/components/QrDialog/index.vue b/src/components/QrDialog/index.vue index 317927e..defb488 100644 --- a/src/components/QrDialog/index.vue +++ b/src/components/QrDialog/index.vue @@ -128,6 +128,9 @@ font-weight: bold; font-size: 30px; margin-top: 60px; + display: block; + height: auto; + overflow: hidden; .canvas { width: 50vw; diff --git a/src/utils/printUtils.ts b/src/utils/printUtils.ts new file mode 100644 index 0000000..8c71409 --- /dev/null +++ b/src/utils/printUtils.ts @@ -0,0 +1,53 @@ +import printJS from 'print-js' +// JSON表头配置项 +interface IJsonPropertie { + field: string // 字段名 + displayName: string // 要显示的中文名 + columnSize?: string // 列宽度,非必填 +} +/** + * 打印HTML元素 + * @param element 元素id + * @param header 打印标题 + * @param style 打印样式 + * @param ignoreElements 忽略元素id列表 + */ +export function printHtml(element: string, header?: string, style?: string, ignoreElements?: string[]) { + printJS({ + printable: element, // 标签元素id + type: 'html', // 打印类型 + header: `

${header}

`, // '标题', + targetStyles: ['*'], // 默认情况下,库仅在打印 HTML 元素时处理某些样式。此选项允许您传递要处理的样式数组。例如:[‘padding-top’, ‘border-bottom’] + style: style || '@page {margin:0 10mm};', // 可选-打印时去掉眉页眉尾 + ignoreElements: ignoreElements || [], // 传入打印父 html 元素时应忽略的 html id 数组。使其不打印。 + }) +} + +export function printJSON(jsonData: Array | Object, properties: IJsonPropertie[], header?: string, style?: string, gridHeaderStyle?: string, gridStyle?: string) { + printJS({ + printable: jsonData, // json 数据对象 + type: 'json', + properties, + header: `

${header}

`, // '表单', + style: style || '', // 可选-打印时去掉眉页眉尾 + gridHeaderStyle: gridHeaderStyle || 'border: 1px solid #000;text-align:center', + gridStyle: gridStyle || 'border: 1px solid #000;text-align:center', + }) +} + +/** + * 打印图片 + * @param element 元素id + * @param header 打印标题 + * @param style 打印样式 + * @param ignoreElements 忽略元素id列表 + */ +export function printImage(image: string, header?: string, style?: string) { + printJS({ + printable: image, // 标签元素id + type: 'image', // 打印类型 + header: `

${header}

`, // '标题', + targetStyles: ['*'], // 默认情况下,库仅在打印 HTML 元素时处理某些样式。此选项允许您传递要处理的样式数组。例如:[‘padding-top’, ‘border-bottom’] + style: style || '@page {margin:0 10mm};', // 可选-打印时去掉眉页眉尾 + }) +} diff --git a/src/views/measure/source/components/baseInfoDetail.vue b/src/views/measure/source/components/baseInfoDetail.vue new file mode 100644 index 0000000..7e67094 --- /dev/null +++ b/src/views/measure/source/components/baseInfoDetail.vue @@ -0,0 +1,309 @@ + + + + diff --git a/src/views/measure/source/components/sourceApprovalDetail.vue b/src/views/measure/source/components/sourceApprovalDetail.vue index 28cd56c..7b0fc62 100644 --- a/src/views/measure/source/components/sourceApprovalDetail.vue +++ b/src/views/measure/source/components/sourceApprovalDetail.vue @@ -3,13 +3,10 @@ import { reactive, ref } from 'vue' import type { Ref } from 'vue' import { ElMessage, ElMessageBox } from 'element-plus' -import type { FormInstance, UploadInstance, UploadProps, UploadUserFile } from 'element-plus' +import type { FormInstance, UploadUserFile } from 'element-plus' import type { IButton, ISupplier, traceSupplierPerson } from '../list_interface' -import ManageBox from './manageBox.vue' -import showPhoto from '@/views/system/tool/showPhoto.vue' -import { exportFile } from '@/utils/exportUtils' -import { UploadFile } from '@/api/measure/file' -import { getSoucreLisListExport, getSoucreLisUpdate, getSoucreListDetail, getSoucreListlevelType } from '@/api/measure/source' +import baseInfoDetail from './baseInfoDetail.vue' +import { getSoucreListDetail, getSoucreListlevelType } from '@/api/measure/source' import { submitApproval } from '@/api/approval' const loading = ref(false) // 表单加载状态 const infoId = ref('') // id @@ -207,16 +204,16 @@ } const approvalDialog = ref() // 点击数据后的操作按钮 -const clickBtn = (row: ISupplier, buttonType: string) => { +const clickBtn = (buttonType: string) => { switch (buttonType) { case '同意': - approvalDialog.value.initDialog('agree', row.taskId) + approvalDialog.value.initDialog('agree', dataForm.value.taskId) break case '驳回': - approvalDialog.value.initDialog('reject', row.taskId) + approvalDialog.value.initDialog('reject', dataForm.value.taskId) break case '拒绝': - approvalDialog.value.initDialog('refuse', row.taskId) + approvalDialog.value.initDialog('refuse', dataForm.value.taskId) break case '取消': handleCancel() @@ -229,287 +226,14 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + diff --git a/src/views/measure/source/list.vue b/src/views/measure/source/list.vue index c7bd2f1..846a74c 100644 --- a/src/views/measure/source/list.vue +++ b/src/views/measure/source/list.vue @@ -2,11 +2,13 @@ import { getCurrentInstance, ref } from 'vue' import type { Ref } from 'vue' import { ElLoading, ElMessage, ElMessageBox } from 'element-plus' -import type { IlistQuery, IlistType } from './list_interface' +import type { ISupplier, IlistQuery, IlistType } from './list_interface' import type { TableColumn } from '@/components/NormalTable/table_interface' -import { getSoucreList, getSoucreListDelete } from '@/api/measure/source' +import { exportSourceList, getSoucreList, getSoucreListDelete } from '@/api/measure/source' import { uploadApi } from '@/api/system/notice' import { exportExcel } from '@/utils/exportXlsx' +import { printJSON } from '@/utils/printUtils' +import { exportFile } from '@/utils/exportUtils' // 查询条件 const listQuery: Ref = ref({ supplierNo: '', // 业务内容 @@ -18,7 +20,7 @@ // 控制是否显示新增页面 const show = ref(true) // 表格数据 -const list = ref([]) +const list = ref([]) const { proxy } = getCurrentInstance() as any // 总数 const total = ref(0) @@ -42,8 +44,8 @@ align: 'center', }, { - text: '业务资质', - value: 'briefName', + text: '公司业务范围', + value: 'businessScope', align: 'center', }, { @@ -58,14 +60,14 @@ }, { text: '地址', - value: 'companyCity', + value: 'briefName', align: 'center', }, { text: '创建时间', value: 'createTime', align: 'center', - width: '180', + width: '180px', }, { text: '备注', @@ -92,7 +94,15 @@ listQuery.value.offset = 1 } getSoucreList(listQuery.value).then((response) => { - list.value = response.data.rows + list.value = response.data.rows.map((item: ISupplier) => { + if (item.companyProvince && item.companyCity) { + item.briefName = `${item.companyProvince}/${item.companyCity}` + } + else { + item.briefName = item.companyProvince || item.companyCity + } + return item + }) total.value = parseInt(response.data.total) loadingTable.value = false }) @@ -152,34 +162,7 @@ limit: 20, } } -// 导出 -const exportExcelBtn = () => { - const loading = ElLoading.service({ - lock: true, - text: 'Loading', - background: 'rgba(255, 255, 255, 0.8)', - }) - if (checkoutList.value.length <= 0 && list.value.length > 0) { - // exportExcel({ - // json: list.value.map((item: IlistType, index: number) => ({ index: index + 1, supplierNo: item.supplierNo, supplierName: item.supplierName, businessContent: item.businessContent, briefName: item.briefName, director: item.director, mobile: item.mobile, companyCity: item.companyCity, createTime: item.createTime, remark: item.remark })), - // name: '溯源供方', - // titleArr: ['序号', '溯源供方编号', '溯源供方名称', '业务内容', '业务资质', '负责人', '联系方式', '地址', '创建时间', '备注'], - // sheetName: 'sheet1', - // }) - // } - // else if (checkoutList.value.length > 0) { - // exportExcel({ - // json: checkoutList.value.map((item: IlistType, index: number) => ({ index: index + 1, supplierNo: item.supplierNo, supplierName: item.supplierName, businessContent: item.businessContent, briefName: item.briefName, director: item.director, mobile: item.mobile, companyCity: item.companyCity, createTime: item.createTime, remark: item.remark })), - // name: '溯源供方', - // titleArr: ['序号', '溯源供方编号', '溯源供方名称', '业务内容', '业务资质', '负责人', '联系方式', '地址', '创建时间', '备注'], - // sheetName: 'sheet1', - // }) - } - else { - ElMessage.warning('暂无数据') - } - loading.close() -} + // 上传文件/批量导入 const onFileChange = (event: any) => { if (event.target.files[0].type === 'application/pdf') { @@ -211,27 +194,60 @@ } fetchData(true) } -const upload = () => { + +// 批量导入 +const uploadAll = () => { + // todo: 批量导入 fileRef.value.click() } -const uploadAll = () => { - upload() -} +// 添加溯源供方 const add = () => { $router.push('/source/add') } const exportAll = () => { - exportExcelBtn() + const loading = ElLoading.service({ + lock: true, + text: '下载中请稍后', + background: 'rgba(255, 255, 255, 0.8)', + }) + if (list.value.length > 0) { + const params = { + supplierNo: '', // 业务内容 + supplierName: '', // 溯源供方名称 + businessContent: '', // 溯源供方编号 + ids: checkoutList.value, + } + exportSourceList(params).then((res) => { + const blob = new Blob([res.data]) + exportFile(blob, '溯源供方列表.xlsx') + }) + } + else { + ElMessage.warning('无数据可导出数据') + } + loading.close() } -// 打印 -const printObj = ref({ - id: 'print', // 需要打印元素的id - popTitle: '溯源供方编号模板', // 打印配置页上方的标题 - extraHead: '', // 最上方的头部文字,附加在head标签上的额外标签,使用逗号分割 - preview: false, // 是否启动预览模式,默认是false - standard: '', - extarCss: '', -}) + +// 打印列表 +function printList() { + // 打印列 + const properties = columns.value.map((item) => { + return { + field: item.value, + displayName: item.text, + } + }) + if (checkoutList.value.length <= 0 && list.value.length > 0) { + printJSON(list.value, properties, '溯源供方列表') + } + else if (checkoutList.value.length > 0) { + const printList = list.value.filter((item: ISupplier) => checkoutList.value.includes(item.id)) + printJSON(printList, properties, '溯源供方列表') + } + else { + ElMessage('无可打印内容') + } +} =10.13.0'} dev: false + registry.npmmirror.com/print-js/1.6.0: + resolution: {integrity: sha512-BfnOIzSKbqGRtO4o0rnj/K3681BSd2QUrsIZy/+WdCIugjIswjmx3lDEZpXB2ruGf9d4b3YNINri81+J0FsBWg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/print-js/-/print-js-1.6.0.tgz} + name: print-js + version: 1.6.0 + dev: false + registry.npmmirror.com/qrcode/1.5.1: resolution: {integrity: sha512-nS8NJ1Z3md8uTjKtP+SGGhfqmTCs5flU/xR623oI0JX+Wepz9R8UrRVCTBTJm3qGw3rH6jJ6MUHjkDx15cxSSg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/qrcode/-/qrcode-1.5.1.tgz} name: qrcode diff --git a/src/api/measure/source.ts b/src/api/measure/source.ts index 1b8bf27..e447f41 100644 --- a/src/api/measure/source.ts +++ b/src/api/measure/source.ts @@ -64,8 +64,8 @@ }) } -// 导出详情 -export function getSoucreLisListExport(data: object) { +// 导出列表 +export function exportSourceList(data: { businessContent: string; supplierName: string; supplierNo: string; ids: string[] }) { return request({ url: `${prefix}/supplier/listExport`, method: 'post', diff --git a/src/assets/styles/globals.scss b/src/assets/styles/globals.scss index 0ea0555..8960267 100644 --- a/src/assets/styles/globals.scss +++ b/src/assets/styles/globals.scss @@ -122,3 +122,17 @@ .full-width-input { width: 100% !important; } + +// 详情页面输入框样式调整, 背景白,字体加深,悬停显示输入字符 +.detail-input.is-disabled .el-input__wrapper { + background-color: #fff; +} + +.detail-input.is-disabled .el-input__inner { + color: var(--el-text-color-regular); + -webkit-text-fill-color: var(--el-text-color-regular); + + &:hover { + cursor: text; + } +} diff --git a/src/components/QrDialog/index.vue b/src/components/QrDialog/index.vue index 317927e..defb488 100644 --- a/src/components/QrDialog/index.vue +++ b/src/components/QrDialog/index.vue @@ -128,6 +128,9 @@ font-weight: bold; font-size: 30px; margin-top: 60px; + display: block; + height: auto; + overflow: hidden; .canvas { width: 50vw; diff --git a/src/utils/printUtils.ts b/src/utils/printUtils.ts new file mode 100644 index 0000000..8c71409 --- /dev/null +++ b/src/utils/printUtils.ts @@ -0,0 +1,53 @@ +import printJS from 'print-js' +// JSON表头配置项 +interface IJsonPropertie { + field: string // 字段名 + displayName: string // 要显示的中文名 + columnSize?: string // 列宽度,非必填 +} +/** + * 打印HTML元素 + * @param element 元素id + * @param header 打印标题 + * @param style 打印样式 + * @param ignoreElements 忽略元素id列表 + */ +export function printHtml(element: string, header?: string, style?: string, ignoreElements?: string[]) { + printJS({ + printable: element, // 标签元素id + type: 'html', // 打印类型 + header: `

${header}

`, // '标题', + targetStyles: ['*'], // 默认情况下,库仅在打印 HTML 元素时处理某些样式。此选项允许您传递要处理的样式数组。例如:[‘padding-top’, ‘border-bottom’] + style: style || '@page {margin:0 10mm};', // 可选-打印时去掉眉页眉尾 + ignoreElements: ignoreElements || [], // 传入打印父 html 元素时应忽略的 html id 数组。使其不打印。 + }) +} + +export function printJSON(jsonData: Array | Object, properties: IJsonPropertie[], header?: string, style?: string, gridHeaderStyle?: string, gridStyle?: string) { + printJS({ + printable: jsonData, // json 数据对象 + type: 'json', + properties, + header: `

${header}

`, // '表单', + style: style || '', // 可选-打印时去掉眉页眉尾 + gridHeaderStyle: gridHeaderStyle || 'border: 1px solid #000;text-align:center', + gridStyle: gridStyle || 'border: 1px solid #000;text-align:center', + }) +} + +/** + * 打印图片 + * @param element 元素id + * @param header 打印标题 + * @param style 打印样式 + * @param ignoreElements 忽略元素id列表 + */ +export function printImage(image: string, header?: string, style?: string) { + printJS({ + printable: image, // 标签元素id + type: 'image', // 打印类型 + header: `

${header}

`, // '标题', + targetStyles: ['*'], // 默认情况下,库仅在打印 HTML 元素时处理某些样式。此选项允许您传递要处理的样式数组。例如:[‘padding-top’, ‘border-bottom’] + style: style || '@page {margin:0 10mm};', // 可选-打印时去掉眉页眉尾 + }) +} diff --git a/src/views/measure/source/components/baseInfoDetail.vue b/src/views/measure/source/components/baseInfoDetail.vue new file mode 100644 index 0000000..7e67094 --- /dev/null +++ b/src/views/measure/source/components/baseInfoDetail.vue @@ -0,0 +1,309 @@ + + + + diff --git a/src/views/measure/source/components/sourceApprovalDetail.vue b/src/views/measure/source/components/sourceApprovalDetail.vue index 28cd56c..7b0fc62 100644 --- a/src/views/measure/source/components/sourceApprovalDetail.vue +++ b/src/views/measure/source/components/sourceApprovalDetail.vue @@ -3,13 +3,10 @@ import { reactive, ref } from 'vue' import type { Ref } from 'vue' import { ElMessage, ElMessageBox } from 'element-plus' -import type { FormInstance, UploadInstance, UploadProps, UploadUserFile } from 'element-plus' +import type { FormInstance, UploadUserFile } from 'element-plus' import type { IButton, ISupplier, traceSupplierPerson } from '../list_interface' -import ManageBox from './manageBox.vue' -import showPhoto from '@/views/system/tool/showPhoto.vue' -import { exportFile } from '@/utils/exportUtils' -import { UploadFile } from '@/api/measure/file' -import { getSoucreLisListExport, getSoucreLisUpdate, getSoucreListDetail, getSoucreListlevelType } from '@/api/measure/source' +import baseInfoDetail from './baseInfoDetail.vue' +import { getSoucreListDetail, getSoucreListlevelType } from '@/api/measure/source' import { submitApproval } from '@/api/approval' const loading = ref(false) // 表单加载状态 const infoId = ref('') // id @@ -207,16 +204,16 @@ } const approvalDialog = ref() // 点击数据后的操作按钮 -const clickBtn = (row: ISupplier, buttonType: string) => { +const clickBtn = (buttonType: string) => { switch (buttonType) { case '同意': - approvalDialog.value.initDialog('agree', row.taskId) + approvalDialog.value.initDialog('agree', dataForm.value.taskId) break case '驳回': - approvalDialog.value.initDialog('reject', row.taskId) + approvalDialog.value.initDialog('reject', dataForm.value.taskId) break case '拒绝': - approvalDialog.value.initDialog('refuse', row.taskId) + approvalDialog.value.initDialog('refuse', dataForm.value.taskId) break case '取消': handleCancel() @@ -229,287 +226,14 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + diff --git a/src/views/measure/source/list.vue b/src/views/measure/source/list.vue index c7bd2f1..846a74c 100644 --- a/src/views/measure/source/list.vue +++ b/src/views/measure/source/list.vue @@ -2,11 +2,13 @@ import { getCurrentInstance, ref } from 'vue' import type { Ref } from 'vue' import { ElLoading, ElMessage, ElMessageBox } from 'element-plus' -import type { IlistQuery, IlistType } from './list_interface' +import type { ISupplier, IlistQuery, IlistType } from './list_interface' import type { TableColumn } from '@/components/NormalTable/table_interface' -import { getSoucreList, getSoucreListDelete } from '@/api/measure/source' +import { exportSourceList, getSoucreList, getSoucreListDelete } from '@/api/measure/source' import { uploadApi } from '@/api/system/notice' import { exportExcel } from '@/utils/exportXlsx' +import { printJSON } from '@/utils/printUtils' +import { exportFile } from '@/utils/exportUtils' // 查询条件 const listQuery: Ref = ref({ supplierNo: '', // 业务内容 @@ -18,7 +20,7 @@ // 控制是否显示新增页面 const show = ref(true) // 表格数据 -const list = ref([]) +const list = ref([]) const { proxy } = getCurrentInstance() as any // 总数 const total = ref(0) @@ -42,8 +44,8 @@ align: 'center', }, { - text: '业务资质', - value: 'briefName', + text: '公司业务范围', + value: 'businessScope', align: 'center', }, { @@ -58,14 +60,14 @@ }, { text: '地址', - value: 'companyCity', + value: 'briefName', align: 'center', }, { text: '创建时间', value: 'createTime', align: 'center', - width: '180', + width: '180px', }, { text: '备注', @@ -92,7 +94,15 @@ listQuery.value.offset = 1 } getSoucreList(listQuery.value).then((response) => { - list.value = response.data.rows + list.value = response.data.rows.map((item: ISupplier) => { + if (item.companyProvince && item.companyCity) { + item.briefName = `${item.companyProvince}/${item.companyCity}` + } + else { + item.briefName = item.companyProvince || item.companyCity + } + return item + }) total.value = parseInt(response.data.total) loadingTable.value = false }) @@ -152,34 +162,7 @@ limit: 20, } } -// 导出 -const exportExcelBtn = () => { - const loading = ElLoading.service({ - lock: true, - text: 'Loading', - background: 'rgba(255, 255, 255, 0.8)', - }) - if (checkoutList.value.length <= 0 && list.value.length > 0) { - // exportExcel({ - // json: list.value.map((item: IlistType, index: number) => ({ index: index + 1, supplierNo: item.supplierNo, supplierName: item.supplierName, businessContent: item.businessContent, briefName: item.briefName, director: item.director, mobile: item.mobile, companyCity: item.companyCity, createTime: item.createTime, remark: item.remark })), - // name: '溯源供方', - // titleArr: ['序号', '溯源供方编号', '溯源供方名称', '业务内容', '业务资质', '负责人', '联系方式', '地址', '创建时间', '备注'], - // sheetName: 'sheet1', - // }) - // } - // else if (checkoutList.value.length > 0) { - // exportExcel({ - // json: checkoutList.value.map((item: IlistType, index: number) => ({ index: index + 1, supplierNo: item.supplierNo, supplierName: item.supplierName, businessContent: item.businessContent, briefName: item.briefName, director: item.director, mobile: item.mobile, companyCity: item.companyCity, createTime: item.createTime, remark: item.remark })), - // name: '溯源供方', - // titleArr: ['序号', '溯源供方编号', '溯源供方名称', '业务内容', '业务资质', '负责人', '联系方式', '地址', '创建时间', '备注'], - // sheetName: 'sheet1', - // }) - } - else { - ElMessage.warning('暂无数据') - } - loading.close() -} + // 上传文件/批量导入 const onFileChange = (event: any) => { if (event.target.files[0].type === 'application/pdf') { @@ -211,27 +194,60 @@ } fetchData(true) } -const upload = () => { + +// 批量导入 +const uploadAll = () => { + // todo: 批量导入 fileRef.value.click() } -const uploadAll = () => { - upload() -} +// 添加溯源供方 const add = () => { $router.push('/source/add') } const exportAll = () => { - exportExcelBtn() + const loading = ElLoading.service({ + lock: true, + text: '下载中请稍后', + background: 'rgba(255, 255, 255, 0.8)', + }) + if (list.value.length > 0) { + const params = { + supplierNo: '', // 业务内容 + supplierName: '', // 溯源供方名称 + businessContent: '', // 溯源供方编号 + ids: checkoutList.value, + } + exportSourceList(params).then((res) => { + const blob = new Blob([res.data]) + exportFile(blob, '溯源供方列表.xlsx') + }) + } + else { + ElMessage.warning('无数据可导出数据') + } + loading.close() } -// 打印 -const printObj = ref({ - id: 'print', // 需要打印元素的id - popTitle: '溯源供方编号模板', // 打印配置页上方的标题 - extraHead: '', // 最上方的头部文字,附加在head标签上的额外标签,使用逗号分割 - preview: false, // 是否启动预览模式,默认是false - standard: '', - extarCss: '', -}) + +// 打印列表 +function printList() { + // 打印列 + const properties = columns.value.map((item) => { + return { + field: item.value, + displayName: item.text, + } + }) + if (checkoutList.value.length <= 0 && list.value.length > 0) { + printJSON(list.value, properties, '溯源供方列表') + } + else if (checkoutList.value.length > 0) { + const printList = list.value.filter((item: ISupplier) => checkoutList.value.includes(item.id)) + printJSON(printList, properties, '溯源供方列表') + } + else { + ElMessage('无可打印内容') + } +} { - dialogVisible.value = false -} -// 点击弹窗的完成追加到表格数组中 -const addPushList = () => { - formInline.value.traceSupplierPersonList.push(JSON.parse(JSON.stringify(addPersonObj.value))) - handleClose() -} + // 删除行 const deleteList = () => { traceSupplierPersonList.value = traceSupplierPersonList.value.filter((item: traceSupplierPerson) => { return !SelectionList.value.includes(item) }) } -// 点击提交/导出按钮 -function exportForm() { - const params = { - businessContent: formInline.value.businessContent, - supplierName: formInline.value.supplierName, - supplierNo: formInline.value.supplierNo, - } - getSoucreLisListExport(params).then((res) => { - exportFile(res.data, '溯源供方详情') - }) -} +// 打印表单 +const printObj = ref({ + id: 'form', // 需要打印元素的id + popTitle: '溯源供方详情', // 打印配置页上方的标题 + extraHead: '

溯源供方详情

', // 最上方的头部文字,附加在head标签上的额外标签,使用逗号分割 + preview: false, // 是否启动预览模式,默认是false + standard: '', + extarCss: '', +}) // 保存至草稿箱 function saveForm(formEl: FormInstance | undefined) { @@ -294,6 +285,7 @@ item.editable = false } } +// 非添加页面获取详情 if (pageType.value !== 'add') { getInfo() } @@ -303,10 +295,10 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + - + - - - + + - + - - - + + - + - - - - - - - - - - - - - - - + + - + - - - + + + + - + - - - + + - + - - + + + + - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - {{ formInline.minioFileName === '' ? '上传' : '更换附件' }} - - - - - + + + + + + + + + + + + + + + + + + + + + + + {{ formInline.minioFileName === '' ? '上传' : '更换附件' }} + + + + + + +