<template>
|
<div class="editable-cell">
|
<div v-if="editable" class="editable-cell-input-wrapper">
|
|
<a-select
|
style="margin: -5px 0"
|
@change="handleChange"
|
v-model="selectKey"
|
>
|
<a-select-option v-for="(item, key) in dictData" :value="key" :key="key">
|
{{ item }}
|
</a-select-option>
|
</a-select>
|
<a-icon
|
type="check"
|
class="editable-cell-icon-check"
|
@click="check"
|
/>
|
</div>
|
<div v-else class="editable-cell-text-wrapper">
|
{{ computeValue || ' ' }}
|
<a-icon type="edit" class="editable-cell-icon" @click="edit"/>
|
</div>
|
</div>
|
</template>
|
<script lang="tsx">
|
import {
|
Component,
|
Prop,
|
Vue,
|
Emit,
|
|
} from 'vue-property-decorator';
|
import * as _ from 'lodash';
|
import axios from "axios";
|
|
@Component({})
|
export default class EditableCell extends Vue {
|
private selectKey: any = '1'
|
private editable: boolean = false
|
@Prop({
|
type: String,
|
default: ''
|
})
|
private text: string
|
|
@Prop(
|
{
|
type: Object,
|
default: () => {
|
return {}
|
}
|
}
|
)
|
private dictData: any
|
|
|
get computeValue() {
|
return this.text
|
}
|
private created() {
|
}
|
private handleChange(e: any) {
|
const value = e;
|
this.selectKey = value;
|
}
|
|
|
private check() {
|
let val = this.dictData[this.selectKey]
|
this.editable = false;
|
this.$emit('change', val);
|
this.$emit('flag', this.editable)
|
}
|
|
private edit() {
|
this.editable = true;
|
for (let i in this.dictData) {
|
if (this.computeValue === this.dictData[i]) {
|
this.selectKey = i
|
}
|
}
|
this.$emit('flag', this.editable)
|
}
|
|
}
|
</script>
|
|
<style scoped>
|
.editable-cell {
|
position: relative;
|
}
|
|
.editable-cell-input-wrapper,
|
.editable-cell-text-wrapper {
|
padding-right: 24px;
|
}
|
|
.editable-cell-text-wrapper {
|
padding: 5px 24px 5px 5px;
|
}
|
|
.editable-cell-icon,
|
.editable-cell-icon-check {
|
position: absolute;
|
right: 0;
|
width: 20px;
|
cursor: pointer;
|
}
|
|
.editable-cell-icon {
|
line-height: 18px;
|
display: none;
|
}
|
|
.editable-cell-icon-check {
|
line-height: 28px;
|
}
|
|
.editable-cell:hover .editable-cell-icon {
|
display: inline-block;
|
}
|
|
.editable-cell-icon:hover,
|
.editable-cell-icon-check:hover {
|
color: #108ee9;
|
}
|
|
.editable-add-btn {
|
margin-bottom: 8px;
|
}
|
</style>
|
