ui: set modal centered and change button icon

This commit is contained in:
zchengo
2023-01-19 23:43:26 +08:00
parent adbe1063ae
commit 51c665055e
3 changed files with 73 additions and 73 deletions
+4 -6
View File
@@ -14,7 +14,7 @@
<div> <div>
<a-button type="primary" @click="onExport"> <a-button type="primary" @click="onExport">
<template #icon> <template #icon>
<DownloadOutlined /> <ExportOutlined />
</template>导出</a-button> </template>导出</a-button>
</div> </div>
</div> </div>
@@ -39,7 +39,7 @@
</a-table> </a-table>
<!-- 新建、编辑合同 --> <!-- 新建、编辑合同 -->
<a-modal v-model:visible="visible" :title="title" @ok="onSave" @cancel="onCancel" cancelText="取消" okText="保存" <a-modal v-model:visible="visible" :title="title" @ok="onSave" @cancel="onCancel" cancelText="取消" okText="保存"
width="800px" style="top: 80px"> width="800px" :centered="true">
<div style="height: 55vh;overflow-y: scroll;padding: 0 15px;"> <div style="height: 55vh;overflow-y: scroll;padding: 0 15px;">
<a-form ref="contractFormRef" :model="contract" layout="vertical" name="contract" :rules="rules"> <a-form ref="contractFormRef" :model="contract" layout="vertical" name="contract" :rules="rules">
<a-row :gutter="16"> <a-row :gutter="16">
@@ -172,7 +172,7 @@
<script> <script>
import { ref, reactive, onMounted, createVNode } from 'vue'; import { ref, reactive, onMounted, createVNode } from 'vue';
import { SearchOutlined, ExclamationCircleOutlined, UpCircleOutlined, DownCircleOutlined, DownloadOutlined } from '@ant-design/icons-vue'; import { SearchOutlined, ExclamationCircleOutlined, ExportOutlined } from '@ant-design/icons-vue';
import moment from 'moment' import moment from 'moment'
import { createContract, updateContract, queryContractList, queryContractInfo, deleteContract, queryContractPlist, contractExport } from '../api/contract'; import { createContract, updateContract, queryContractList, queryContractInfo, deleteContract, queryContractPlist, contractExport } from '../api/contract';
import { queryProductList } from "../api/product"; import { queryProductList } from "../api/product";
@@ -182,9 +182,7 @@ import { message, Modal } from 'ant-design-vue';
export default { export default {
components: { components: {
SearchOutlined, SearchOutlined,
UpCircleOutlined, ExportOutlined
DownCircleOutlined,
DownloadOutlined
}, },
setup() { setup() {
+4 -4
View File
@@ -14,7 +14,7 @@
<div> <div>
<a-button type="primary" @click="onExport"> <a-button type="primary" @click="onExport">
<template #icon> <template #icon>
<DownloadOutlined /> <ExportOutlined />
</template>导出</a-button> </template>导出</a-button>
</div> </div>
</div> </div>
@@ -39,7 +39,7 @@
<!-- 新建、编辑客户 --> <!-- 新建、编辑客户 -->
<a-modal v-model:visible="visible" :title="title" @ok="onSave" @cancel="onCancel" cancelText="取消" okText="保存" <a-modal v-model:visible="visible" :title="title" @ok="onSave" @cancel="onCancel" cancelText="取消" okText="保存"
width="800px" style="top: 80px;"> width="800px" :centered="true">
<div style="height: 55vh;overflow-y: scroll;padding: 0 15px;"> <div style="height: 55vh;overflow-y: scroll;padding: 0 15px;">
<a-form ref="customerFormRef" :model="customer" layout="vertical" name="customer" :rules="rules"> <a-form ref="customerFormRef" :model="customer" layout="vertical" name="customer" :rules="rules">
<a-row :gutter="16"> <a-row :gutter="16">
@@ -126,7 +126,7 @@
<script> <script>
import { ref, reactive, onMounted, createVNode } from 'vue'; import { ref, reactive, onMounted, createVNode } from 'vue';
import { SearchOutlined, ExclamationCircleOutlined, DownloadOutlined } from '@ant-design/icons-vue'; import { SearchOutlined, ExclamationCircleOutlined, ExportOutlined } from '@ant-design/icons-vue';
import moment from 'moment' import moment from 'moment'
import { createCustomer, updateCustomer, queryCustomerList, queryCustomerInfo, deleteCustomer, customerExport } from '../api/customer'; import { createCustomer, updateCustomer, queryCustomerList, queryCustomerInfo, deleteCustomer, customerExport } from '../api/customer';
import { message, Modal } from 'ant-design-vue'; import { message, Modal } from 'ant-design-vue';
@@ -135,7 +135,7 @@ import regionData from '../assets/region';
export default { export default {
components: { components: {
SearchOutlined, SearchOutlined,
DownloadOutlined ExportOutlined
}, },
setup() { setup() {
const columns = [{ const columns = [{
+65 -63
View File
@@ -14,7 +14,7 @@
<div> <div>
<a-button type="primary" @click="onExport"> <a-button type="primary" @click="onExport">
<template #icon> <template #icon>
<DownloadOutlined /> <ExportOutlined />
</template>导出</a-button> </template>导出</a-button>
</div> </div>
</div> </div>
@@ -41,73 +41,75 @@
</a-table> </a-table>
<!-- 新建、编辑产品 --> <!-- 新建、编辑产品 -->
<a-modal v-model:visible="visible" :title="title" @ok="onSave" @cancel="onCancel" cancelText="取消" okText="保存" <a-modal v-model:visible="visible" :title="title" @ok="onSave" @cancel="onCancel" cancelText="取消" okText="保存"
width="800px" style="top: 80px"> width="800px" :centered="true">
<a-form ref="productFormRef" :model="product" layout="vertical" name="product" :rules="rules"> <div style="height: 55vh;overflow-y: scroll;padding: 0 15px;">
<a-row :gutter="16"> <a-form ref="productFormRef" :model="product" layout="vertical" name="product" :rules="rules">
<a-col :span="12"> <a-row :gutter="16">
<a-form-item label="产品名称" name="name"> <a-col :span="12">
<a-input v-model:value="product.name" /> <a-form-item label="产品名称" name="name">
</a-form-item> <a-input v-model:value="product.name" />
</a-col> </a-form-item>
<a-col :span="12"> </a-col>
<a-form-item label="产品类型" name="type"> <a-col :span="12">
<a-select v-model:value="product.type" placeholder="请选择"> <a-form-item label="产品类型" name="type">
<a-select-option :value="1">默认</a-select-option> <a-select v-model:value="product.type" placeholder="请选择">
</a-select> <a-select-option :value="1">默认</a-select-option>
</a-form-item> </a-select>
</a-col> </a-form-item>
</a-row> </a-col>
<a-row :gutter="16"> </a-row>
<a-col :span="12"> <a-row :gutter="16">
<a-form-item label="产品单位" name="unit"> <a-col :span="12">
<a-select v-model:value="product.unit" placeholder="请选择"> <a-form-item label="产品单位" name="unit">
<a-select-option value="">个</a-select-option> <a-select v-model:value="product.unit" placeholder="请选择">
<a-select-option value=""></a-select-option> <a-select-option value=""></a-select-option>
<a-select-option value=""></a-select-option> <a-select-option value=""></a-select-option>
<a-select-option value=""></a-select-option> <a-select-option value=""></a-select-option>
<a-select-option value=""></a-select-option> <a-select-option value=""></a-select-option>
<a-select-option value=""></a-select-option> <a-select-option value=""></a-select-option>
<a-select-option value=""></a-select-option> <a-select-option value=""></a-select-option>
<a-select-option value=""></a-select-option> <a-select-option value=""></a-select-option>
</a-select> <a-select-option value="">吨</a-select-option>
</a-form-item> </a-select>
</a-col> </a-form-item>
<a-col :span="12"> </a-col>
<a-form-item label="产品编码" name="code"> <a-col :span="12">
<a-input v-model:value="product.code" /> <a-form-item label="产品编码" name="code">
</a-form-item> <a-input v-model:value="product.code" />
</a-col> </a-form-item>
</a-row> </a-col>
<a-row :gutter="16"> </a-row>
<a-col :span="12"> <a-row :gutter="16">
<a-form-item label="价格" name="price"> <a-col :span="12">
<a-input-number v-model:value="product.price" style="width: 100%" /> <a-form-item label="价格" name="price">
</a-form-item> <a-input-number v-model:value="product.price" style="width: 100%" />
</a-col> </a-form-item>
<a-col :span="12"> </a-col>
<a-form-item label="是否上下架" name="status"> <a-col :span="12">
<a-select v-model:value="product.status" placeholder="请选择"> <a-form-item label="是否上下架" name="status">
<a-select-option :value="1">上架</a-select-option> <a-select v-model:value="product.status" placeholder="请选择">
<a-select-option :value="2">架</a-select-option> <a-select-option :value="1">架</a-select-option>
</a-select> <a-select-option :value="2">下架</a-select-option>
</a-form-item> </a-select>
</a-col> </a-form-item>
</a-row> </a-col>
<a-row :gutter="16"> </a-row>
<a-col :span="24"> <a-row :gutter="16">
<a-form-item label="产品描述" name="description"> <a-col :span="24">
<a-textarea v-model:value="product.description" :rows="4" /> <a-form-item label="产品描述" name="description">
</a-form-item> <a-textarea v-model:value="product.description" :rows="4" />
</a-col> </a-form-item>
</a-row> </a-col>
</a-form> </a-row>
</a-form>
</div>
</a-modal> </a-modal>
</div> </div>
</template> </template>
<script> <script>
import { ref, reactive, onMounted, createVNode } from 'vue'; import { ref, reactive, onMounted, createVNode } from 'vue';
import { SearchOutlined, ExclamationCircleOutlined, DownloadOutlined } from '@ant-design/icons-vue'; import { SearchOutlined, ExclamationCircleOutlined, ExportOutlined } from '@ant-design/icons-vue';
import moment from 'moment' import moment from 'moment'
import { createProduct, updateProduct, queryProductList, deleteProduct, queryProductInfo, productExport } from '../api/product'; import { createProduct, updateProduct, queryProductList, deleteProduct, queryProductInfo, productExport } from '../api/product';
import { message, Modal } from 'ant-design-vue'; import { message, Modal } from 'ant-design-vue';
@@ -115,7 +117,7 @@ import { message, Modal } from 'ant-design-vue';
export default { export default {
components: { components: {
SearchOutlined, SearchOutlined,
DownloadOutlined ExportOutlined
}, },
setup() { setup() {
// 表格字段 // 表格字段