123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138 |
- <template>
- <div class="basic-table">
- <cip-table :offset="offset"
- :data="modelValue"
- @update:data="updateData"
- :columns="options"
- :depend-on-values="dependOnValues"
- :border="hideBorder"
- :field-key="fieldKey"
- :tableHeaderLabel="config.tableHeaderLabel"
- :hide-index="config.hideIndex"
- :index-fixed="config.indexFixed ?? true"
- :show-summary="config.showSummary"
- :span-method="config.spanMethod"
- size="small"
- :stripe="true"
- :in-form="true">
- <el-table-column width="80px" v-if="!config?.hideDelete" fixed="right" label="操作">
- <template #default="{$index}">
- <cip-table-button @click="insertItem($index)">
- <i class="el-icon-circle-plus-outline cip-primary-color handler-size"/>
- </cip-table-button>
- <cip-table-button @click="deleteItem($index)">
- <i class="el-icon-remove-outline cip-danger-color handler-size"/>
- </cip-table-button>
- </template>
- </el-table-column>
- </cip-table>
- <div style="text-align: center" v-if="!config?.hideAdd">
- <el-button size="medium" type="text" @click="addItem">
- <i class="el-icon-circle-plus create-handle" />
- </el-button>
- </div>
- </div>
- </template>
- <script>
- import { computed, defineAsyncComponent, inject } from 'vue'
- import { formInputProps } from '@cip/components/cip-form-input/form-input-props'
- import { ElButton, ElMessageBox, ElTableColumn } from 'element-plus'
- import { useFormInput } from '@cip/components/hooks/form-input'
- import CipTableButton from '@cip/components/cip-table-button'
- import { setOptionWritable } from './util'
- export default {
- name: 'basic-table',
- components: {
- CipTable: defineAsyncComponent(() => import('@cip/components/cip-table')),
- CipTableButton,
- ElButton,
- ElTableColumn
- },
- props: {
- ...formInputProps,
- type: {
- default: 'input'
- }
- },
- setup (props, context) {
- const elFormItem = inject('elFormItem', {})
- const formInput = useFormInput(props, context)
- const { emitInput } = formInput
- // if (!isArray(props.modelValue)) {
- // emitInput([])
- // }
- const offset = computed(() => {
- return props.config.hideIndex ? undefined : 0
- })
- const hideBorder = computed(() => {
- return !props.config.hideBorder
- })
- const options = computed(() => {
- let options = props.config.options || []
- if (props.config.tableColumnStatus === 'writable') {
- options = setOptionWritable(options, true)
- }
- return options
- })
- const addItem = () => {
- const val = Array.isArray(props.modelValue) ? props.modelValue : []
- val.push({})
- emitItemValidate(val)
- emitInput(val)
- }
- const insertItem = (index) => {
- const val = props.modelValue
- val.splice(index, 0, {})
- emitItemValidate(val)
- emitInput(val)
- }
- const deleteItem = (index) => {
- ElMessageBox.confirm('确实删除此列', '提示').then(() => {
- const val = props.modelValue
- val.splice(index, 1)
- emitItemValidate(val)
- emitInput(val)
- }).catch(() => {})
- }
- const emitItemValidate = (val) => {
- // eslint-disable-next-line no-unused-expressions
- elFormItem.formItemMitt?.emit('el.form.change', [val])
- }
- const updateData = (val) => {
- formInput.emitModelValue(val)
- }
- return {
- offset,
- hideBorder,
- options,
- insertItem,
- deleteItem,
- addItem,
- updateData
- }
- }
- }
- </script>
- <style lang="less">
- .el-form-item.is-error{
- .basic-table{
- outline: 1px solid @danger;
- }
- }
- .basic-table{
- overflow: hidden;
- width: 0;
- flex-grow: 2;
- .handler-size{
- font-size: 16px;
- }
- .create-handle{
- font-size: 24px;
- }
- }
- </style>
|