ui: set modal centered and change button icon
This commit is contained in:
@@ -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() {
|
||||||
|
|
||||||
|
|||||||
@@ -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
@@ -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() {
|
||||||
// 表格字段
|
// 表格字段
|
||||||
|
|||||||
Reference in New Issue
Block a user