123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302 |
- <template>
- <div class="pageIndexClass">
- <div class="content">
- <byTable :source="sourceList.data" :pagination="sourceList.pagination" :config="config" :loading="loading" highlight-current-row :action-list="[
- {
- text: '添加货代公司',
- action: () => openModal(),
- },
- ]" @get-list="getList">
- <template #address="{ item }">
- <div style="width: 100%">
- <span v-if="item.province">{{ item.province }},</span>
- <span v-if="item.city">{{ item.city }},</span>
- <span v-if="item.address">{{ item.address }}</span>
- </div>
- </template>
- </byTable>
- </div>
- <el-dialog :title="modalType == 'add' ? '添加货代公司' : '编辑货代公司'" v-if="dialogVisible" v-model="dialogVisible" width="700" v-loading="loadingDialog">
- <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="submit"> </byForm>
- <template #footer>
- <el-button @click="dialogVisible = false" size="default">取 消</el-button>
- <el-button type="primary" @click="submitForm()" size="default">确 定</el-button>
- </template>
- </el-dialog>
- </div>
- </template>
- <script setup>
- import { computed, ref } from "vue";
- import byTable from "@/components/byTable/index";
- import byForm from "@/components/byForm/index";
- import { ElMessage, ElMessageBox } from "element-plus";
- const { proxy } = getCurrentInstance();
- const sourceList = ref({
- data: [],
- pagination: {
- total: 0,
- pageNum: 1,
- pageSize: 10,
- keyword: "",
- },
- });
- const loading = ref(false);
- const config = computed(() => {
- return [
- {
- attrs: {
- label: "公司名称",
- prop: "companyName",
- },
- },
- {
- attrs: {
- label: "地址",
- slot: "address",
- },
- },
- {
- attrs: {
- label: "公司电话",
- prop: "companyTel",
- },
- },
- {
- attrs: {
- label: "联系人",
- prop: "personName",
- },
- },
- {
- attrs: {
- label: "联系人电话",
- prop: "personTel",
- },
- },
- {
- attrs: {
- label: "操作",
- width: 120,
- align: "center",
- },
- renderHTML(row) {
- return [
- {
- attrs: {
- label: "修改",
- type: "primary",
- text: true,
- },
- el: "button",
- click() {
- update(row);
- },
- },
- {
- attrs: {
- label: "删除",
- type: "primary",
- text: true,
- },
- el: "button",
- click() {
- ElMessageBox.confirm(
- "此操作将永久删除该数据, 是否继续?",
- "提示",
- {
- confirmButtonText: "确定",
- cancelButtonText: "取消",
- type: "warning",
- }
- ).then(() => {
- proxy
- .post("/freightForwarder/delete", {
- id: row.id,
- })
- .then(() => {
- ElMessage({
- message: "删除成功",
- type: "success",
- });
- getList();
- });
- });
- },
- },
- ];
- },
- },
- ];
- });
- const getList = async (req) => {
- sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
- loading.value = true;
- proxy
- .post("/freightForwarder/page", sourceList.value.pagination)
- .then((res) => {
- sourceList.value.data = res.rows;
- sourceList.value.pagination.total = res.total;
- setTimeout(() => {
- loading.value = false;
- }, 200);
- });
- };
- getList();
- const modalType = ref("add");
- const dialogVisible = ref(false);
- const loadingDialog = ref(false);
- const submit = ref(null);
- const formOption = reactive({
- inline: true,
- labelWidth: 100,
- itemWidth: 100,
- rules: [],
- });
- const formConfig = computed(() => {
- return [
- {
- type: "title",
- title: "基本信息",
- label: "",
- },
- {
- type: "input",
- prop: "companyName",
- label: "公司名称",
- itemWidth: 50,
- itemType: "text",
- },
- {
- type: "input",
- prop: "companyTel",
- label: "公司电话",
- itemWidth: 50,
- itemType: "text",
- },
- {
- type: "input",
- prop: "province",
- label: "省会",
- itemWidth: 50,
- itemType: "text",
- },
- {
- type: "input",
- prop: "city",
- label: "城市",
- itemWidth: 50,
- itemType: "text",
- },
- {
- type: "input",
- prop: "address",
- label: "地址",
- itemType: "text",
- },
- {
- type: "title",
- title: "联系人信息",
- label: "",
- },
- {
- type: "input",
- prop: "personName",
- label: "姓名",
- itemWidth: 33,
- itemType: "text",
- },
- {
- type: "input",
- prop: "personTel",
- label: "电话",
- itemWidth: 33,
- itemType: "text",
- },
- {
- type: "input",
- prop: "personMail",
- label: "邮箱",
- itemWidth: 34,
- itemType: "text",
- },
- {
- type: "title",
- title: "银行账户信息",
- label: "",
- },
- {
- type: "input",
- prop: "bankName",
- label: "银行",
- itemWidth: 50,
- itemType: "text",
- },
- {
- type: "input",
- prop: "bankAccountName",
- label: "账户名",
- itemWidth: 50,
- itemType: "text",
- },
- {
- type: "input",
- prop: "bankAccount",
- label: "账号",
- itemWidth: 50,
- itemType: "text",
- },
- ];
- });
- const rules = ref({
- companyName: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
- });
- const formData = reactive({
- data: {},
- });
- const openModal = () => {
- modalType.value = "add";
- formData.data = {};
- loadingDialog.value = false;
- dialogVisible.value = true;
- };
- const submitForm = () => {
- submit.value.handleSubmit(() => {
- loadingDialog.value = true;
- proxy.post("/freightForwarder/" + modalType.value, formData.data).then(
- () => {
- ElMessage({
- message: modalType.value == "add" ? "添加成功" : "编辑成功",
- type: "success",
- });
- dialogVisible.value = false;
- getList();
- },
- (err) => {
- console.log(err);
- loadingDialog.value = false;
- }
- );
- });
- };
- const update = (row) => {
- modalType.value = "edit";
- loadingDialog.value = true;
- proxy.post("/freightForwarder/detail", { id: row.id }).then((res) => {
- formData.data = res;
- loadingDialog.value = false;
- });
- dialogVisible.value = true;
- };
- </script>
- <style lang="scss" scoped>
- .tenant {
- padding: 20px;
- }
- ::v-deep(.el-input-number .el-input__inner) {
- text-align: left;
- }
- </style>
|