update 表格的序号列

This commit is contained in:
lb 2023-02-14 14:54:26 +08:00
parent 6b0d5f0bc1
commit f4107ec904
16 changed files with 173 additions and 173 deletions

View File

@ -1,80 +1,74 @@
<!-- 这里单纯的配置表格就好了-->
<template>
<div class="base-list-table w-full">
<el-table
:data="tableData"
v-bind="tableConfig"
ref="base-list-table"
:cell-style="{ padding: 0 }"
:header-cell-style="/** 重写表格样式 **/ {
padding: '8px 0',
}"
row-key="id"
>
<!-- @cell-mouse-enter="(row, col, cell, event) => $emit('cell-mouse-enter', row, col, cell, event)"> -->
<!-- @cell-mouse-leave="(row, col, cell, event) => $emit('cell-mouse-leave', row, col, cell, event)"> -->
<!-- 表格头定义 -->
<template v-for="(head, idx) in columnConfig">
<!-- 索引列 -->
<el-table-column
:key="idx"
v-if="head.type"
:type="head.type"
:label="head.label || head.name || ''"
:header-align="head.align || 'center'"
:align="head.align || 'center'"
:width="head.width || 50"
:index="
head.type === 'index'
? (val) => {
return val + 1 + (page - 1) * size;
}
: null
"
v-bind="head.more"
></el-table-column>
<!-- 普通的表头 -->
<el-table-column
v-else
:key="idx + 'else'"
:label="head.label ? head.label : head.name"
:prop="head.prop || null"
:width="head.width || null"
:min-width="head.minWidth || null"
:fixed="head.fixed || null"
:show-overflow-tooltip="head.showOverflowTooltip || true"
:tooltip-effect="head.tooltipEffect || 'light'"
filter-placement="top"
:align="head.align || null"
v-bind="head.more"
>
<!-- 子组件 -->
<template v-if="head.prop" slot-scope="scope">
<component
v-if="head.subcomponent"
:is="head.subcomponent"
:key="idx + 'sub'"
:inject-data="{ ...scope.row, head }"
@emit-data="handleSubEmitData"
/>
<!-- 直接展示数据或应用过滤器 -->
<span v-else>{{
scope.row[head.prop] | commonFilter(head.filter)
}}</span>
</template>
<div class="base-list-table w-full">
<el-table
:data="tableData"
v-bind="tableConfig"
ref="base-list-table"
:cell-style="{ padding: 0 }"
:header-cell-style="/** 重写表格样式 **/ {
padding: '8px 0',
}"
row-key="id"
>
<!-- @cell-mouse-enter="(row, col, cell, event) => $emit('cell-mouse-enter', row, col, cell, event)"> -->
<!-- @cell-mouse-leave="(row, col, cell, event) => $emit('cell-mouse-leave', row, col, cell, event)"> -->
<!-- 表格头定义 -->
<template v-for="(head, idx) in columnConfig">
<!-- 索引列 -->
<el-table-column
:key="idx"
v-if="head.type"
:type="head.type"
:label="head.label || head.name || ''"
:header-align="head.align || 'center'"
:align="head.align || 'center'"
:width="head.width || 50"
:index="
head.type === 'index'
? (val) => {
return val + 1 + (currentPage - 1) * currentSize;
}
: null
"
v-bind="head.more"
></el-table-column>
<!-- 普通的表头 -->
<el-table-column
v-else
:key="idx + 'else'"
:label="head.label ? head.label : head.name"
:prop="head.prop || null"
:width="head.width || null"
:min-width="head.minWidth || null"
:fixed="head.fixed || null"
:show-overflow-tooltip="head.showOverflowTooltip || true"
:tooltip-effect="head.tooltipEffect || 'light'"
filter-placement="top"
:align="head.align || null"
v-bind="head.more"
>
<!-- 子组件 -->
<template v-if="head.prop" slot-scope="scope">
<component
v-if="head.subcomponent"
:is="head.subcomponent"
:key="idx + 'sub'"
:inject-data="{ ...scope.row, head }"
@emit-data="handleSubEmitData"
/>
<!-- 直接展示数据或应用过滤器 -->
<span v-else>{{ scope.row[head.prop] | commonFilter(head.filter) }}</span>
</template>
<!-- 多级表头 -->
<template v-if="!head.prop && head.children">
<TableHead
v-for="(subhead, subindex) in head.children"
:key="'subhead-' + idx + '-subindex-' + subindex"
:opt="subhead"
/>
</template>
</el-table-column>
</template>
</el-table>
</div>
<!-- 多级表头 -->
<template v-if="!head.prop && head.children">
<TableHead v-for="(subhead, subindex) in head.children" :key="'subhead-' + idx + '-subindex-' + subindex" :opt="subhead" />
</template>
</el-table-column>
</template>
</el-table>
</div>
</template>
<script>
@ -84,49 +78,49 @@ import TableHead from "./TableHead.vue";
// 3. more...
export default {
name: "BaseListTable",
components: { TableHead },
filters: {
commonFilter: (source, filterType = (a) => a) => {
return filterType(source);
},
},
props: {
tableConfig: {
type: Object,
default: () => ({}),
},
columnConfig: {
type: Array,
default: () => [],
},
tableData: {
type: Array,
default: () => [],
},
},
inject: ["urls"],
data() {
return {
page: 1,
size: 20, // 20
dataList: [],
};
},
watch: {
// 'props.tableData': {
// handler: () => {
// this.$refs['base-list-table'].doLayout();
// },
// immediate: true,
// },
},
methods: {
handleSubEmitData(payload) {
console.log("[component] BaseListTable handleSubEmitData(): ", payload);
this.$emit("operate-event", payload);
},
},
name: "BaseListTable",
components: { TableHead },
filters: {
commonFilter: (source, filterType = (a) => a) => {
return filterType(source);
},
},
props: {
currentPage: { type: Number, default: 1 },
currentSize: { type: Number, default: 20 },
tableConfig: {
type: Object,
default: () => ({}),
},
columnConfig: {
type: Array,
default: () => [],
},
tableData: {
type: Array,
default: () => [],
},
},
inject: ["urls"],
data() {
return {
dataList: [],
};
},
watch: {
// 'props.tableData': {
// handler: () => {
// this.$refs['base-list-table'].doLayout();
// },
// immediate: true,
// },
},
methods: {
handleSubEmitData(payload) {
console.log("[component] BaseListTable handleSubEmitData(): ", payload);
this.$emit("operate-event", payload);
},
},
};
</script>

View File

@ -10,6 +10,8 @@
:column-config="tableConfig.column"
:table-data="dataList"
@operate-event="handleOperate"
:current-page="page"
:current-size="size"
/>
<el-pagination

View File

@ -1,11 +1,13 @@
import TableOperaionComponent from '@/components/noTemplateComponents/operationComponent'
import TableTextComponent from '@/components/noTemplateComponents/detailComponent'
import StatusComponent from '@/components/noTemplateComponents/statusComponent'
import InputArea from 'code-brick-zj'
import { timeFilter } from '@/utils/filters'
export default function () {
const tableProps = [
{ type: 'index', label: '序号' },
{ prop: "createTime", label: "添加时间", filter: timeFilter },
{ prop: 'name', label: '混料程序名称' },
{ prop: 'code', label: '程序编码' },
{ prop: 'version', label: '版本号' },
@ -83,6 +85,8 @@ export default function () {
// extraParams: ['stepId'],
extraParams: 'stepId',
props: [
// { type: 'index', label: '序号' },
// { prop: "createTime", label: "添加时间", filter: timeFilter },
{ prop: 'sort', label: '步骤', isEditField: true },
{ prop: 'name', label: '参数名称', isEditField: true },
{ prop: 'description', label: '描述', isEditField: true },

View File

@ -2,10 +2,12 @@ import TableOperaionComponent from "@/components/noTemplateComponents/operationC
import switchBtn from "@/components/noTemplateComponents/switchBtn";
import QuillRichInput from "@/components/noTemplateComponents/richInput";
import request from "@/utils/request";
import { dictFilter } from '@/utils/filters'
import { timeFilter } from '@/utils/filters'
export default function () {
const tableProps = [
{ type: 'index', label: '序号' },
{ prop: "createTime", label: "添加时间", filter: timeFilter },
{ prop: "name", label: "窑车号" },
{ prop: "code", label: "编码" },
// { prop: "typeDictValue", label: "过渡车", filter: val => ['否', '是'][val] },

View File

@ -1,16 +1,17 @@
import TableOperaionComponent from "@/components/noTemplateComponents/operationComponent";
import switchBtn from "@/components/noTemplateComponents/switchBtn";
import request from "@/utils/request";
import { timeFilter } from '@/utils/filters'
export default function () {
const tableProps = [
{ type: 'index', label: '序号' },
{ prop: "createTime", label: "添加时间", filter: timeFilter },
{ prop: "name", label: "客户名称" },
{ prop: "code", label: "编码" },
{ prop: "tel", label: "联系电话" },
{ prop: "email", label: "联系邮箱" },
{ prop: "address", label: "地址" },
{ prop: "contact", label: "联系人" },
// { prop: "status", label: "产线状态", subcomponent: switchBtn }, // subcomponent
{ prop: "description", label: "描述" },
{ prop: "remark", label: "备注" },
{
@ -80,48 +81,26 @@ export default function () {
input: true,
label: "联系电话",
prop: "tel",
// rules: { required: true, message: "not empty", trigger: "blur" },
elparams: { placeholder: "请输入联系电话" },
},
{
input: true,
label: "联系邮箱",
prop: "email",
// rules: { required: true, message: "not empty", trigger: "blur" },
elparams: { placeholder: "请输入联系邮箱" },
},
// {
// select: true,
// label: "所属工厂",
// prop: "factoryId",
// fetchData: () => this.$http.get("/pms/factory/page", { params: { limit: 999, page: 1 } }),
// option: [],
// rules: { required: true, message: "not empty", trigger: "change" },
// },
// {
// input: true,
// label: "产线TT值",
// prop: "tvalue",
// rules: [
// { required: true, message: "not empty", trigger: "blur" },
// { type: "number", message: "数字", trigger: "blur", transform: (val) => Number(val) },
// ],
// elparams: { placeholder: "设定TT值每小时下片数量" },
// },
],
[
{
input: true,
label: "地址",
prop: "address",
// rules: { required: true, message: "not empty", trigger: "blur" },
elparams: { placeholder: "请输入客户地址" },
},
{
input: true,
label: "联系人",
prop: "contact",
// rules: { required: true, message: "not empty", trigger: "blur" },
elparams: { placeholder: "请输入联系人" },
},
],
@ -132,7 +111,6 @@ export default function () {
{ name: "add", label: "保存", type: "primary", permission: "pms:customer:save", showOnEdit: false },
{ name: "update", label: "更新", type: "primary", permission: "pms:customer:update", showOnEdit: true },
{ name: "reset", label: "重置", type: "warning", showAlways: true },
// { name: 'cancel', label: '取消', showAlways: true },
],
},
};

View File

@ -7,6 +7,8 @@ import QuillRichInput from "@/components/noTemplateComponents/richInput";
export default function () {
const tableProps = [
{ type: 'index', label: '序号' },
{ prop: "createTime", label: "添加时间", filter: timeFilter },
{ prop: 'name', label: '设备名称' },
{ prop: 'code', label: '设备编码' },
{ prop: 'equipmentType', label: '设备类型' },
@ -50,7 +52,7 @@ export default function () {
const dialogConfigs = {
clickModalToClose: true,
menu: [{ name: '设备信息', key: 'info' }, { name: '设备属性信息', key: 'attr', onlyEditMode: true }],
menu: [{ name: '设备信息', key: 'info' }, { name: '设备属性信息', key: 'attr', onlyEditMode: true }],
form: {
rows: [
[
@ -89,7 +91,8 @@ export default function () {
// extraParams: ['stepId'],
extraParams: 'equipmentId',
props: [
{ prop: 'createTime', label: '创建时间', filter: timeFilter },
{ type: 'index', label: '序号' },
{ prop: "createTime", label: "添加时间", filter: timeFilter },
// { prop: 'equipmentId', label: '所属设备id' },
{ prop: 'attrName', label: '属性名称', isEditField: true },
{ prop: 'attrValue', label: '属性值', isEditField: true },

View File

@ -5,6 +5,7 @@ import { dictFind, timeFilter } from '@/utils/filters'
export default function () {
const tableProps = [
{ type: 'index', label: '序号' },
{ prop: "createTime", label: "添加时间", filter: timeFilter },
{ prop: "name", label: "类型名称" },
{ prop: "code", label: "类型编码" },

View File

@ -1,8 +1,11 @@
import TableOperaionComponent from '@/components/noTemplateComponents/operationComponent'
import { timeFilter } from '@/utils/filters'
export default function () {
const tableProps = [
{ type: 'index', label: '序号' },
{ prop: "createTime", label: "添加时间", filter: timeFilter },
{ prop: 'name', label: '工厂名称' },
{ prop: 'code', label: '工厂编码' },
{ prop: 'address', label: '地址' },

View File

@ -5,8 +5,8 @@ import { timeFilter, dictFilter } from "@/utils/filters";
export default function () {
const tableProps = [
// { type: 'index', label: '序号' },
// { prop: "createTime", label: "添加时间", filter: timeFilter },
{ type: 'index', label: '序号' },
{ prop: "createTime", label: "添加时间", filter: timeFilter },
{ prop: "name", label: "物料名称" },
{ prop: "code", label: "物料编码" },
{ prop: "typeDictValue", label: "类别", filter: dictFilter("material_category") }, // subcomponent: {/** TODO: create a new component for this option */} },
@ -171,7 +171,8 @@ export default function () {
// extraParams: ['stepId'],
extraParams: "materialId",
props: [
{ prop: "createTime", label: "添加时间", filter: timeFilter, isEditField: true },
{ type: 'index', label: '序号' },
{ prop: "createTime", label: "添加时间", filter: timeFilter },
{ prop: "name", label: "属性名", isEditField: true },
{ prop: "value", label: "属性值", isEditField: true },
{

View File

@ -2,9 +2,12 @@ import TableOperaionComponent from "@/components/noTemplateComponents/operationC
import switchBtn from "@/components/noTemplateComponents/switchBtn";
import request from "@/utils/request";
import { dictFilter } from '@/utils/filters'
import { timeFilter } from '@/utils/filters'
export default function () {
const tableProps = [
{ type: 'index', label: '序号' },
{ prop: "createTime", label: "添加时间", filter: timeFilter },
{ prop: "name", label: "料仓名称" },
{ prop: "code", label: "料仓编码" },
{ prop: "typeDictValue", label: "料仓类型", filter: dictFilter('liaocang') },

View File

@ -4,11 +4,12 @@ import { timeFilter } from '@/utils/filters'
export default function () {
const tableProps = [
{ prop: 'createTime', label: '添加时间', filter: timeFilter },
{ type: 'index', label: '序号' },
{ prop: "createTime", label: "添加时间", filter: timeFilter },
{ prop: 'name', label: '类型名称' },
{ prop: 'code', label: '类型编码' },
{ prop: 'code', label: '类型编码' },
{ prop: 'enName', label: '英文名称' },
{ prop: 'enAb', label: '缩写' },
{ prop: 'enAb', label: '缩写' },
{ prop: 'description', label: '描述', },
{ prop: 'remark', label: '备注' },
{

View File

@ -6,7 +6,8 @@ import { timeFilter, dictFilter } from '@/utils/filters'
export default function () {
const tableProps = [
{ prop: 'createTime', label: '添加时间', filter: timeFilter },
{ type: 'index', label: '序号' },
{ prop: "createTime", label: "添加时间", filter: timeFilter },
{ prop: 'name', label: '产品名称' },
{ prop: 'code', label: '产品编码' },
{ prop: 'typeDictValue', label: '产品类型', filter: dictFilter('product_type') },
@ -53,7 +54,7 @@ export default function () {
const dictList = JSON.parse(localStorage.getItem('dictList') || {})
const dialogConfigs = {
menu: [{ name: '产品信息', key: 'info' }, { name: '产品属性信息', key: 'attr', onlyEditMode: true }, { name: '附件', key: 'attachment', onlyEditMode: true}],
menu: [{ name: '产品信息', key: 'info' }, { name: '产品属性信息', key: 'attr', onlyEditMode: true }, { name: '附件', key: 'attachment', onlyEditMode: true }],
form: {
rows: [
[
@ -93,7 +94,8 @@ export default function () {
// extraParams: ['stepId'],
extraParams: 'productId',
props: [
{ prop: 'createTime', label: '创建时间', filter: timeFilter },
{ type: 'index', label: '序号' },
{ prop: "createTime", label: "添加时间", filter: timeFilter },
// { prop: 'productId', label: '产品ID' },
{ prop: 'name', label: '属性名称', isEditField: true },
{ prop: 'value', label: '属性值', isEditField: true },
@ -120,7 +122,7 @@ export default function () {
forceAttachCode: true, // 产品属性新增必填 code 字段......
rows: [
[
{ input: true, label: '属性名称', prop: 'name', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入属性名称' } },
{ input: true, label: '属性名称', prop: 'name', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入属性名称' } },
{ input: true, label: '属性值', prop: 'value', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入属性值' } },
],
[

View File

@ -1,15 +1,18 @@
import TableOperaionComponent from "@/components/noTemplateComponents/operationComponent";
import switchBtn from "@/components/noTemplateComponents/switchBtn";
import request from "@/utils/request";
import { timeFilter } from '@/utils/filters'
export default function () {
const tableProps = [
{ type: 'index', label: '序号' },
{ prop: "createTime", label: "添加时间", filter: timeFilter },
{ prop: "name", label: "产线名称" },
{ prop: "code", label: "产线编码" },
{ prop: "factory", label: "所属工厂" },
{ prop: "status", label: "产线状态", subcomponent: switchBtn }, // subcomponent
// TODO: 2023.2.3 产线状态切换功能不生效
{ prop: "tvalue", label: "每小时下片数量" },
// { prop: "tvalue", label: "每小时下片数量" },
{ prop: "description", label: "描述" },
{ prop: "remark", label: "备注" },
{
@ -73,8 +76,6 @@ export default function () {
rules: { required: true, message: "not empty", trigger: "blur" },
elparams: { placeholder: "请输入产线编码" },
},
],
[
{
select: true,
label: "所属工厂",
@ -83,17 +84,19 @@ export default function () {
option: [],
rules: { required: true, message: "not empty", trigger: "change" },
},
{
input: true,
label: "产线TT值",
prop: "tvalue",
rules: [
{ required: true, message: "not empty", trigger: "blur" },
{ type: "number", message: "数字", trigger: "blur", transform: (val) => Number(val) },
],
elparams: { placeholder: "设定TT值每小时下片数量" },
},
],
// [
// {
// input: true,
// label: "产线TT值",
// prop: "tvalue",
// rules: [
// { required: true, message: "not empty", trigger: "blur" },
// { type: "number", message: "数字", trigger: "blur", transform: (val) => Number(val) },
// ],
// elparams: { placeholder: "设定TT值每小时下片数量" },
// },
// ],
[{ textarea: true, label: "描述信息", prop: "description", elparams: { placeholder: "描述信息" } }],
[{ input: true, label: "备注", prop: "remark", elparams: { placeholder: "备注" } }],
],

View File

@ -5,13 +5,10 @@ import { timeFilter } from '@/utils/filters'
export default function () {
const tableProps = [
{ type: 'index', label: '序号' },
{ prop: "createTime", label: "添加时间", filter: timeFilter },
{ prop: "name", label: "砖型名称" },
{ prop: "code", label: "砖型编码" },
// { prop: "factory", label: "所属工厂" },
// { prop: "status", label: "产线状态", subcomponent: switchBtn }, // subcomponent
// TODO: 2023.2.3 产线状态切换功能不生效
// { prop: "tvalue", label: "每小时下片数量" },
{ prop: "specifications", label: "规格" },
{ prop: "remark", label: "备注" },
{

View File

@ -1,9 +1,12 @@
import TableOperaionComponent from "@/components/noTemplateComponents/operationComponent";
import switchBtn from "@/components/noTemplateComponents/switchBtn";
import request from "@/utils/request";
import { timeFilter } from '@/utils/filters'
export default function () {
const tableProps = [
{ type: 'index', label: '序号' },
{ prop: "createTime", label: "添加时间", filter: timeFilter },
{ prop: "name", label: "供应商名称" },
{ prop: "code", label: "编码" },
{ prop: "tel", label: "联系电话" },

View File

@ -1,8 +1,11 @@
import TableOperaionComponent from '@/components/noTemplateComponents/operationComponent'
import { timeFilter } from '@/utils/filters'
export default function () {
const tableProps = [
{ type: 'index', label: '序号' },
{ prop: "createTime", label: "添加时间", filter: timeFilter },
{ prop: 'name', label: '工序名称' },
{ prop: 'code', label: '工序编码' },
{ prop: 'prdLine', label: '产线名称' },