|
|
@@ -1,87 +1,361 @@
|
|
|
<template>
|
|
|
- <div class="container mx-auto p-4">
|
|
|
- <h1 class="text-2xl font-bold mb-4">原料品类管理</h1>
|
|
|
-
|
|
|
- <!-- 操作按钮 -->
|
|
|
- <div class="flex justify-between mb-4">
|
|
|
- <div>
|
|
|
- <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mr-2">新增</button>
|
|
|
- <button class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded mr-2">修改</button>
|
|
|
- <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded mr-2">删除</button>
|
|
|
- <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded mr-2">导出</button>
|
|
|
- <button class="bg-purple-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded">导入</button>
|
|
|
+ <div class="min-h-screen bg-gray-100 dark:bg-gray-900">
|
|
|
+ <!-- 顶部导航 -->
|
|
|
+ <div class="bg-white dark:bg-gray-800 shadow">
|
|
|
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
|
+ <div class="flex justify-between h-16">
|
|
|
+ <div class="flex">
|
|
|
+ <div class="flex-shrink-0 flex items-center">
|
|
|
+ <h1 class="text-xl font-bold text-gray-900 dark:text-white">原料品类管理</h1>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center space-x-4">
|
|
|
+ <button @click="showAddModal = true" class="btn-primary">
|
|
|
+ 新增
|
|
|
+ </button>
|
|
|
+ <button @click="editSelected" class="btn-secondary">
|
|
|
+ 修改
|
|
|
+ </button>
|
|
|
+ <button @click="deleteSelected" class="btn-danger">
|
|
|
+ 删除
|
|
|
+ </button>
|
|
|
+ <button @click="exportData" class="btn-success">
|
|
|
+ 导出
|
|
|
+ </button>
|
|
|
+ <button @click="importData" class="btn-info">
|
|
|
+ 导入
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <!-- 检索区 -->
|
|
|
- <div class="mb-4">
|
|
|
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
|
- <div>
|
|
|
- <label for="materialCode" class="block text-sm font-medium text-gray-700">物料编码</label>
|
|
|
- <input type="text" id="materialCode" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <label for="materialGroup" class="block text-sm font-medium text-gray-700">物料组</label>
|
|
|
- <input type="text" id="materialGroup" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <label for="categoryOne" class="block text-sm font-medium text-gray-700">类别一</label>
|
|
|
- <input type="text" id="categoryOne" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <label for="categoryTwo" class="block text-sm font-medium text-gray-700">类别二</label>
|
|
|
- <input type="text" id="categoryTwo" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <label for="rawMaterialType" class="block text-sm font-medium text-gray-700">原料大类</label>
|
|
|
- <input type="text" id="rawMaterialType" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
|
|
|
+ <!-- 主要内容 -->
|
|
|
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
|
+ <!-- 检索区 -->
|
|
|
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow mb-8">
|
|
|
+ <div class="p-6">
|
|
|
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
|
+ <div>
|
|
|
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">物料编码</label>
|
|
|
+ <input v-model="searchForm.materialCode" type="text" class="mt-1 form-input" placeholder="请输入物料编码">
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">物料组</label>
|
|
|
+ <input v-model="searchForm.materialGroup" type="text" class="mt-1 form-input" placeholder="请输入物料组">
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">类别一</label>
|
|
|
+ <input v-model="searchForm.categoryOne" type="text" class="mt-1 form-input" placeholder="请输入类别一">
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">类别二</label>
|
|
|
+ <input v-model="searchForm.categoryTwo" type="text" class="mt-1 form-input" placeholder="请输入类别二">
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">原料大类</label>
|
|
|
+ <input v-model="searchForm.rawMaterialType" type="text" class="mt-1 form-input" placeholder="请输入原料大类">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mt-6 flex justify-end space-x-3">
|
|
|
+ <button @click="resetSearch" class="btn-secondary">
|
|
|
+ 重置
|
|
|
+ </button>
|
|
|
+ <button @click="performSearch" class="btn-primary">
|
|
|
+ 查询
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="mt-4 flex justify-end">
|
|
|
- <button class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded mr-2">重置</button>
|
|
|
- <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">查询</button>
|
|
|
+
|
|
|
+ <!-- 检索结果表格 -->
|
|
|
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow">
|
|
|
+ <div class="overflow-x-auto">
|
|
|
+ <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
|
|
+ <thead class="bg-gray-50 dark:bg-gray-700">
|
|
|
+ <tr>
|
|
|
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
|
|
+ <input type="checkbox" v-model="selectAll" @click="toggleSelectAll" class="form-checkbox h-5 w-5 text-indigo-600">
|
|
|
+ </th>
|
|
|
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">序号</th>
|
|
|
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">物料编码</th>
|
|
|
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">物料组</th>
|
|
|
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">类别一</th>
|
|
|
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">类别二</th>
|
|
|
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">原料大类</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
|
|
|
+ <tr v-for="(item, index) in paginatedData" :key="item.id">
|
|
|
+ <td class="px-6 py-4 whitespace-nowrap">
|
|
|
+ <input type="checkbox" v-model="selectedItems" :value="item.id" class="form-checkbox h-5 w-5 text-indigo-600">
|
|
|
+ </td>
|
|
|
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ index + 1 }}</td>
|
|
|
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ item.materialCode }}</td>
|
|
|
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ item.materialGroup }}</td>
|
|
|
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ item.categoryOne }}</td>
|
|
|
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ item.categoryTwo }}</td>
|
|
|
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ item.rawMaterialType }}</td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <!-- 检索结果表格 -->
|
|
|
- <div class="overflow-x-auto">
|
|
|
- <table class="min-w-full bg-white">
|
|
|
- <thead>
|
|
|
- <tr>
|
|
|
- <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
|
|
|
- <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600">
|
|
|
- </th>
|
|
|
- <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">序号</th>
|
|
|
- <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">物料编码</th>
|
|
|
- <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">物料组</th>
|
|
|
- <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">类别一</th>
|
|
|
- <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">类别二</th>
|
|
|
- <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">原料大类</th>
|
|
|
- </tr>
|
|
|
- </thead>
|
|
|
- <tbody class="bg-white divide-y divide-gray-200">
|
|
|
- <tr>
|
|
|
- <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-900">
|
|
|
- <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600">
|
|
|
- </td>
|
|
|
- <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-900">1</td>
|
|
|
- <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-900">MAT001</td>
|
|
|
- <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-900">GROUP001</td>
|
|
|
- <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-900">CATEGORY001</td>
|
|
|
- <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-900">CATEGORY002</td>
|
|
|
- <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-900">RAW_TYPE001</td>
|
|
|
- </tr>
|
|
|
- <!-- 更多数据行 -->
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
+ <!-- 新增/编辑模态框 -->
|
|
|
+ <div v-if="showAddModal" class="fixed inset-0 z-10 overflow-y-auto">
|
|
|
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
|
|
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
|
|
|
+ <div class="absolute inset-0 bg-gray-500 dark:bg-gray-900 opacity-75"></div>
|
|
|
+ </div>
|
|
|
+ <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
|
|
|
+ <div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
|
|
+ <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">
|
|
|
+ {{ editingItem ? '编辑原料品类' : '新增原料品类' }}
|
|
|
+ </h3>
|
|
|
+ <form @submit.prevent="submitForm">
|
|
|
+ <div class="grid grid-cols-1 gap-4">
|
|
|
+ <div>
|
|
|
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">物料编码</label>
|
|
|
+ <input v-model="form.materialCode" type="text" class="mt-1 form-input" required />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">物料组</label>
|
|
|
+ <input v-model="form.materialGroup" type="text" class="mt-1 form-input" required />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">类别一</label>
|
|
|
+ <input v-model="form.categoryOne" type="text" class="mt-1 form-input" required />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">类别二</label>
|
|
|
+ <input v-model="form.categoryTwo" type="text" class="mt-1 form-input" required />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">原料大类</label>
|
|
|
+ <input v-model="form.rawMaterialType" type="text" class="mt-1 form-input" required />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mt-6 flex justify-end space-x-3">
|
|
|
+ <button type="button" @click="showAddModal = false" class="btn-secondary">
|
|
|
+ 取消
|
|
|
+ </button>
|
|
|
+ <button type="submit" class="btn-primary">
|
|
|
+ 保存
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { ref } from 'vue';
|
|
|
+import { ref, computed } from 'vue';
|
|
|
+
|
|
|
+// 数据定义
|
|
|
+const items = ref([
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ materialCode: 'MAT001',
|
|
|
+ materialGroup: 'GROUP001',
|
|
|
+ categoryOne: 'CATEGORY001',
|
|
|
+ categoryTwo: 'CATEGORY002',
|
|
|
+ rawMaterialType: 'RAW_TYPE001'
|
|
|
+ },
|
|
|
+ // 更多示例数据...
|
|
|
+]);
|
|
|
+
|
|
|
+const searchForm = ref({
|
|
|
+ materialCode: '',
|
|
|
+ materialGroup: '',
|
|
|
+ categoryOne: '',
|
|
|
+ categoryTwo: '',
|
|
|
+ rawMaterialType: ''
|
|
|
+});
|
|
|
+
|
|
|
+const selectedItems = ref([]);
|
|
|
+const showAddModal = ref(false);
|
|
|
+const editingItem = ref(null);
|
|
|
+const form = ref({
|
|
|
+ materialCode: '',
|
|
|
+ materialGroup: '',
|
|
|
+ categoryOne: '',
|
|
|
+ categoryTwo: '',
|
|
|
+ rawMaterialType: ''
|
|
|
+});
|
|
|
+
|
|
|
+// 计算属性
|
|
|
+const selectAll = computed({
|
|
|
+ get: () => selectedItems.value.length === items.value.length,
|
|
|
+ set: (value) => {
|
|
|
+ if (value) {
|
|
|
+ selectedItems.value = items.value.map(item => item.id);
|
|
|
+ } else {
|
|
|
+ selectedItems.value = [];
|
|
|
+ }
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+const paginatedData = computed(() => {
|
|
|
+ return items.value.filter(item => {
|
|
|
+ const matchesSearch = !searchForm.value.materialCode ||
|
|
|
+ item.materialCode.toLowerCase().includes(searchForm.value.materialCode.toLowerCase()) ||
|
|
|
+ item.materialGroup.toLowerCase().includes(searchForm.value.materialGroup.toLowerCase()) ||
|
|
|
+ item.categoryOne.toLowerCase().includes(searchForm.value.categoryOne.toLowerCase()) ||
|
|
|
+ item.categoryTwo.toLowerCase().includes(searchForm.value.categoryTwo.toLowerCase()) ||
|
|
|
+ item.rawMaterialType.toLowerCase().includes(searchForm.value.rawMaterialType.toLowerCase());
|
|
|
+ return matchesSearch;
|
|
|
+ });
|
|
|
+});
|
|
|
+
|
|
|
+// 方法
|
|
|
+const resetSearch = () => {
|
|
|
+ searchForm.value = {
|
|
|
+ materialCode: '',
|
|
|
+ materialGroup: '',
|
|
|
+ categoryOne: '',
|
|
|
+ categoryTwo: '',
|
|
|
+ rawMaterialType: ''
|
|
|
+ };
|
|
|
+};
|
|
|
+
|
|
|
+const performSearch = () => {
|
|
|
+ // 这里可以添加搜索逻辑
|
|
|
+};
|
|
|
+
|
|
|
+const toggleSelectAll = () => {
|
|
|
+ selectAll.value = !selectAll.value;
|
|
|
+};
|
|
|
+
|
|
|
+const editSelected = () => {
|
|
|
+ if (selectedItems.value.length === 1) {
|
|
|
+ const item = items.value.find(i => i.id === selectedItems.value[0]);
|
|
|
+ editingItem.value = item;
|
|
|
+ form.value = { ...item };
|
|
|
+ showAddModal.value = true;
|
|
|
+ } else {
|
|
|
+ alert('请选择一个条目进行编辑');
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const deleteSelected = () => {
|
|
|
+ if (selectedItems.value.length > 0) {
|
|
|
+ if (confirm('确定要删除所选条目吗？')) {
|
|
|
+ items.value = items.value.filter(item => !selectedItems.value.includes(item.id));
|
|
|
+ selectedItems.value = [];
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ alert('请选择要删除的条目');
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const exportData = () => {
|
|
|
+ // 实现导出逻辑
|
|
|
+ const data = JSON.stringify(items.value, null, 2);
|
|
|
+ const blob = new Blob([data], { type: 'application/json' });
|
|
|
+ const url = URL.createObjectURL(blob);
|
|
|
+ const a = document.createElement('a');
|
|
|
+ a.href = url;
|
|
|
+ a.download = 'raw_materials.json';
|
|
|
+ document.body.appendChild(a);
|
|
|
+ a.click();
|
|
|
+ document.body.removeChild(a);
|
|
|
+ URL.revokeObjectURL(url);
|
|
|
+};
|
|
|
+
|
|
|
+const importData = () => {
|
|
|
+ // 实现导入逻辑
|
|
|
+ const input = document.createElement('input');
|
|
|
+ input.type = 'file';
|
|
|
+ input.accept = '.json';
|
|
|
+ input.onchange = (e) => {
|
|
|
+ const file = e.target.files[0];
|
|
|
+ if (file) {
|
|
|
+ const reader = new FileReader();
|
|
|
+ reader.onload = (event) => {
|
|
|
+ try {
|
|
|
+ const importedData = JSON.parse(event.target.result);
|
|
|
+ items.value = [...items.value, ...importedData];
|
|
|
+ } catch (error) {
|
|
|
+ alert('导入文件格式错误');
|
|
|
+ }
|
|
|
+ };
|
|
|
+ reader.readAsText(file);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ input.click();
|
|
|
+};
|
|
|
+
|
|
|
+const submitForm = () => {
|
|
|
+ if (editingItem.value) {
|
|
|
+ // 更新现有记录
|
|
|
+ const index = items.value.findIndex(item => item.id === editingItem.value.id);
|
|
|
+ if (index !== -1) {
|
|
|
+ items.value[index] = { ...form.value, id: editingItem.value.id };
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 添加新记录
|
|
|
+ const newItem = {
|
|
|
+ ...form.value,
|
|
|
+ id: items.value.length + 1
|
|
|
+ };
|
|
|
+ items.value.push(newItem);
|
|
|
+ }
|
|
|
+ showAddModal.value = false;
|
|
|
+ resetForm();
|
|
|
+};
|
|
|
+
|
|
|
+const resetForm = () => {
|
|
|
+ form.value = {
|
|
|
+ materialCode: '',
|
|
|
+ materialGroup: '',
|
|
|
+ categoryOne: '',
|
|
|
+ categoryTwo: '',
|
|
|
+ rawMaterialType: ''
|
|
|
+ };
|
|
|
+ editingItem.value = null;
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
/* Add your custom styles here */
|
|
|
+.btn-primary {
|
|
|
+ @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
|
|
|
+}
|
|
|
+
|
|
|
+.btn-secondary {
|
|
|
+ @apply bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded;
|
|
|
+}
|
|
|
+
|
|
|
+.btn-danger {
|
|
|
+ @apply bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded;
|
|
|
+}
|
|
|
+
|
|
|
+.btn-success {
|
|
|
+ @apply bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded;
|
|
|
+}
|
|
|
+
|
|
|
+.btn-info {
|
|
|
+ @apply bg-purple-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded;
|
|
|
+}
|
|
|
+
|
|
|
+.form-input {
|
|
|
+ @apply mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm;
|
|
|
+}
|
|
|
+
|
|
|
+.form-select {
|
|
|
+ @apply mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm;
|
|
|
+}
|
|
|
+
|
|
|
+.form-textarea {
|
|
|
+ @apply mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm;
|
|
|
+}
|
|
|
+
|
|
|
+.form-checkbox {
|
|
|
+ @apply h-5 w-5 text-indigo-600;
|
|
|
+}
|
|
|
</style>
|
genlitex