GCLS_Page_BMS/src/views/oboc/CreateLink.vue

<template>
  <div>
    <el-dialog width="480px" title="创建链接" :visible="visible" :before-close="close" :close-on-click-modal="false">
      <el-form ref="form" :model="createForm" label-width="60px">
        <el-form-item label="教材" prop="book_name">
          <div class="select-book">
            <el-input v-model="createForm.book_name" placeholder="请选择教材" disabled />
            <el-button type="text" @click="selectBook">选择</el-button>
          </div>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="createForm.type" class="link-select">
            <el-option label="试用" :value="0" />
            <el-option label="一书一码" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="有效期">
          <el-select v-model="createForm.effective_day_count" class="link-select">
            <el-option label="永久" :value="-1" />
            <el-option
              v-for="item in Array.from({ length: 90 }, (_, i) => i + 1)"
              :key="item"
              :label="`${item}天`"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button type="primary" @click="confirm">确定</el-button>
        <el-button @click="close">取消</el-button>
      </div>
    </el-dialog>

    <SelectBook :visible="visibleSelectBook" @close="closeSelectBook" @confirm="confirmSelectBook" />
  </div>
</template>

<script>
export default {
  name: 'CreateLink'
};
</script>

<script setup>
import { ref, defineEmits } from 'vue';

import SelectBook from './SelectBook.vue';

defineProps({
  visible: Boolean
});

const emits = defineEmits(['close', 'confirm']);

let createForm = ref({
  book_id: '',
  book_name: '',
  type: 1,
  effective_day_count: 3
});

let visibleSelectBook = ref(false);
function selectBook() {
  visibleSelectBook.value = true;
}

function closeSelectBook() {
  visibleSelectBook.value = false;
}

function confirmSelectBook(id, name) {
  createForm.value.book_id = id;
  createForm.value.book_name = name;
  visibleSelectBook.value = false;
}

function close() {
  emits('close');
}

function confirm() {
  emits('confirm', createForm.value.book_id, createForm.value.type, createForm.value.effective_day_count);
}
</script>

<style lang="scss" scoped>
:deep .el-dialog__body {
  padding-bottom: 0;
}

.select-book {
  display: flex;
  column-gap: 12px;
}

.el-form {
  .link-select {
    width: calc(100% - 43px);
  }
}
</style>