ops-management-platform-frontend/src/views/property/meterial/addModal.vue

<template>
  <a-modal v-model:open="visible" :title="title" @ok="handleOk" width="50%">
    <a-form :model="form" layout="vertical">
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="名称" name="name">
            <a-input v-model:value="form.name" placeholder="请输入" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="状态" name="status">
            <a-select v-model:value="form.status" :options="statusOptions" placeholder="请选择" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="规格" name="standards">
            <a-input v-model:value="form.standards" placeholder="请输入" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="单价(元)" name="price">
            <a-input v-model:value="form.price" placeholder="请输入" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="数量" name="amount">
            <a-input v-model:value="form.amount" placeholder="请输入" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="单位" name="unit">
            <a-input v-model:value="form.unit" placeholder="请输入" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="备注" name="remark">
            <a-textarea v-model:value="form.remark" :rows="4" placeholder="请输入" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

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

  export default {
    setup() {
      const title = ref('新增');
      const visible = ref(false);
      const form = reactive({
        name: '',
        status: null,
        remark: '',
        unit: '',
        price: '',
        amount: '',
        standards: '',
      });
      //下拉框
      const statusOptions = [
        {
          value: 0,
          label: '禁用',
        },
        {
          value: 1,
          label: '启用',
        },
      ];
      const showModal = (type, id) => {
        if (type == 1) {
          title.value = '新增';
        } else if (type == 2) {
          title.value = '编辑';
          console.log(id);
        }
        visible.value = true;
      };

      const handleOk = () => {
        console.log('Form Data:', form);
        // 在此处可以添加表单验证逻辑
        visible.value = false;
      };

      return {
        visible,
        title,
        form,
        showModal,
        handleOk,
        statusOptions,
      };
    },
  };
</script>

<style scoped>
  /* 可选样式调整 */
  .ant-modal-body {
    max-width: 600px;
    margin: 0 auto;
  }
</style>