towInOne.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. <template>
  2. <div class="clearfix parentC">
  3. <div class="inputC">{{propValue}}</div>
  4. <div v-if="getPropConfig">
  5. <div class="selectC" v-if="propValue" key="propValue1" @click="openModal">更换</div>
  6. <div class="selectC" v-else key="propValue2" @click="vxeValue = true;">选择</div>
  7. </div>
  8. <vxe-modal v-model="vxeValue" width="800" show-zoom resize transfer show-footer>
  9. <template #title>
  10. <span>选择仓库、仓位</span>
  11. </template>
  12. <template #default>
  13. <by-form :propConfig="config" ref="form"></by-form>
  14. </template>
  15. <template #footer>
  16. <div class="btn">
  17. <el-button type="primary" size="small" @click="doConfirm">确定</el-button>
  18. </div>
  19. </template>
  20. </vxe-modal>
  21. </div>
  22. </template>
  23. <script lang="ts">
  24. import { Component, Prop, Vue, Watch } from "vue-property-decorator";
  25. @Component
  26. export default class TowInOne extends Vue {
  27. vxeValue : any = false
  28. @Prop()
  29. propValue : any;
  30. @Prop()
  31. propConfig : any;
  32. get getPropConfig() {
  33. return this.propConfig?.isSelect;
  34. }
  35. config = {
  36. attr: {
  37. size: 'small',
  38. height: 200,
  39. },
  40. columns: [
  41. [{
  42. span: 11,
  43. label: '仓库',
  44. prop: 'warehouse',
  45. component: 'warehouse',
  46. compConfig: {
  47. attr: {
  48. placeholder: '请选择仓库',
  49. retConfig: {
  50. storehouseName: 'name',
  51. storehouseId: 'id'
  52. },
  53. },
  54. }
  55. }, {
  56. span: 11,
  57. label: '仓位',
  58. prop: 'warehousePosition',
  59. component: 'warehouse-position',
  60. compConfig: {
  61. attr: {
  62. placeholder: '请选择仓位',
  63. retConfig: {
  64. storingLocationName: 'name',
  65. storingLocationId: 'id'
  66. },
  67. }
  68. }
  69. }]
  70. ]
  71. }
  72. // 打开弹窗
  73. openModal() {
  74. let data = (this as any).$lodash.cloneDeep(this.propValue);
  75. data = data.split(',');
  76. setTimeout(() => {
  77. (this as any).$refs.form.setValue({
  78. warehouse: data[0],
  79. warehousePosition: data[1]
  80. })
  81. }, 0)
  82. this.vxeValue = true;
  83. }
  84. // 确定仓库仓位
  85. doConfirm() {
  86. let data : any = (this as any).$refs.form.getValue();
  87. data.towInOne = data.storehouseName + ',' + data.storingLocationName;
  88. if (!data.storehouseId || !data.storingLocationId) return this.$message.warning('仓库仓位为必填项');
  89. this.$emit('onChange', data);
  90. this.vxeValue = false;
  91. }
  92. }
  93. </script>
  94. <style scoped lang="scss">
  95. .parentC {
  96. display: flex;
  97. align-items: center;
  98. .inputC {
  99. float: left;
  100. width: calc(100% - 54px);
  101. }
  102. .selectC {
  103. float: left;
  104. margin-left: 10px;
  105. color: #fff;
  106. background-color: #0089ff;
  107. padding: 0 10px;
  108. border-radius: 12px;
  109. cursor: pointer;
  110. }
  111. }
  112. </style>