调解中心

src/views/system/accountManage/components/AccountFormModal.vue

@@ -12,22 +12,22 @@
       <el-row :gutter="10">
         <el-col :span="24">
           <el-form-item class="w-full" label="手机号" prop="phone">
-            <el-input v-model="form.phone" placeholder="请输入手机号" />
+            <el-input v-model="form.phone" placeholder="请输入手机号" clearable />
           </el-form-item>
         </el-col>
         <el-col :span="24">
           <el-form-item class="w-full" label="密码" prop="password">
-            <el-input v-model="form.password" placeholder="请输入密码" />
+            <el-input v-model="form.password" placeholder="请输入密码" clearable />
           </el-form-item>
         </el-col>
         <el-col :span="24">
           <el-form-item class="w-full" label="用户名称" prop="username">
-            <el-input v-model="form.username" placeholder="请输入用户名称" />
+            <el-input v-model="form.username" placeholder="请输入用户名称" clearable />
           </el-form-item>
         </el-col>
         <el-col :span="24">
           <el-form-item class="w-full" label="调解中心" >
-            <el-select v-model="form.tenant" placeholder="请选择调解中心">
+            <el-select v-model="form.tenant" placeholder="请选择调解中心" clearable>
               <el-option
                 v-for="item in Tenantlist"
                 :key="item.id"
@@ -41,6 +41,7 @@
           <el-form-item class="w-full" label="部门" >
             <el-tree-select
             placeholder="请选择部门"
+            clearable
               v-model="form.departmentId"
               ref="treeselect"
               :checkStrictly="true"
@@ -53,7 +54,7 @@
         
         <el-col :span="24">
           <el-form-item class="w-full" label="角色" prop="roles">
-            <el-select v-model="form.roles" multiple collapse-tags placeholder="请选择角色">
+            <el-select v-model="form.roles" multiple collapse-tags clearable placeholder="请选择角色">
               <el-option
                 v-for="item in options"
                 :key="item.roleCode"

src/views/system/promotionCompany/components/AllocationUserModal.vue

+<template>
+  <vxe-modal
+    resize
+    v-model="showModal"
+    @hide="onHide"
+    title="分配成员"
+    width="900px"
+    show-maximize
+    show-footer
+    esc-closable
+  >
+    <div class="mb-1">
+      <el-button type="primary" @click="userModalRef?.openModal">新增成员</el-button>
+      <el-button type="danger" @click="handleRemove">删除成员</el-button>
+    </div>
+    <vxe-table ref="xTable" :data="tableData">
+      <vxe-column type="checkbox" width="50" />
+      <vxe-column field="username" title="用户账号" minWidth="120" />
+      <vxe-column field="status" title="状态" width="120">
+        <template #default="{ row }">
+          <el-tag :type="row.status == 'enable' ? 'primary' : 'danger'">{{
+            row.status == 'enable' ? '启用' : '禁用'
+          }}</el-tag>
+        </template>
+      </vxe-column>
+    </vxe-table>
+    <template #footer>
+      <el-button type="default" @click="showModal = false">取消</el-button>
+      <el-button :loading="loading" type="primary" @click="submitForm">提交</el-button>
+    </template>
+  </vxe-modal>
+
+  <UserModal ref="userModalRef" @confirm="hanldeConfirm" />
+</template>
+
+<script setup name="AllocationUserModal">
+  import { ref } from 'vue';
+  import { ElMessage } from 'element-plus';
+  import { saveTenant } from '@/api/tenant';
+  import UserModal from '@/components/CommonModal/UserModal/index.vue';
+
+  const emits = defineEmits(['success']);
+
+  const xTable = ref(null);
+  const showModal = ref(false);
+  const userModalRef = ref(null);
+  const loading = ref(false);
+  const tableData = ref([]);
+  const currentRole = ref(null);
+  const submitForm = async () => {
+    try {
+      loading.value = true;
+      const params = {
+        ...currentRole.value,
+        users: tableData.value.map((v) => ({ id: v.id })),
+      };
+      await saveTenant(params);
+      emits('success');
+      ElMessage({
+        type: 'success',
+        message: '设置成功!',
+        plain: true,
+      });
+      showModal.value = false;
+    } catch {}
+    loading.value = false;
+  };
+  const onHide = () => {
+    currentRole.value = null;
+    tableData.value = [];
+  };
+  const openModal = (role) => {
+    currentRole.value = role;
+    tableData.value = role.users;
+    showModal.value = true;
+  };
+
+  const hanldeConfirm = (rows) => {
+    tableData.value.unshift(...rows.filter((row) => !tableData.value.find((v) => v.id == row.id)));
+  };
+  const handleRemove = () => {
+    const checkedList = xTable.value.getCheckboxRecords();
+    if (!checkedList.length) {
+      return ElMessage({
+        type: 'warning',
+        message: '请选择有效数据！',
+        plain: true,
+      });
+    }
+
+    tableData.value = tableData.value.filter((row) => !checkedList.find((v) => v.id == row.id));
+  };
+
+  defineExpose({
+    openModal,
+  });
+</script>

src/views/system/promotionCompany/components/TenantFormModal.vue

+<template>
+  <vxe-modal
+    resize
+    v-model="showModal"
+    :title="modalTitle"
+    @hide="onHide"
+    width="500px"
+    show-maximize
+    show-footer
+    esc-closable
+  >
+    <el-form ref="formRef" :model="form" :rules="rules" inline label-width="110px">
+      <el-row :gutter="10">
+        
+        <el-col :span="24">
+          <el-form-item class="w-full" label="推广公司名称" prop="name">
+            <el-input v-model="form.name" placeholder="请输入推广公司名称" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item class="w-full" label="推广公司编码" prop="code">
+            <el-input v-model="form.code" placeholder="推广公司编码" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item class="w-full" label="省份" prop="name">
+            <el-select v-model="form.province" placeholder="请选择">
+              <el-option
+                v-for="item in citydata"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item class="w-full" label="负责人" prop="adminUser">
+            <el-input v-model="form.adminUser" placeholder="负责人" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item class="w-full" label="负责人手机" prop="phone">
+            <el-input v-model="form.phone" placeholder="负责人手机" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item class="w-full" label="状态" prop="status">
+            <el-radio-group v-model="form.status">
+              <el-radio value="enable">启用</el-radio>
+              <el-radio value="disable">禁用</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <template #footer>
+      <el-button type="default" @click="showModal = false">取消</el-button>
+      <el-button :loading="loading" type="primary" @click="submitForm">提交</el-button>
+    </template>
+  </vxe-modal>
+</template>
+
+<script setup name="tenantFormModal">
+  import { ref, computed } from 'vue';
+  import { saveTenant } from '@/api/tenant';
+  import { ElMessage } from 'element-plus';
+  import citydata from '../../../../assets/citydata';
+
+  const emits = defineEmits(['success']);
+  const currentTenant = ref(null);
+  const showModal = ref(false);
+  const formRef = ref(null);
+
+  const isEdit = computed(() => !!currentTenant.value);
+  const modalTitle = computed(() => (isEdit.value ? '编辑推广公司' : '新增推广公司'));
+
+  const form = ref({
+    name: '',
+    code: '',
+    adminUser: '',
+    'tenantType':'promotion',
+    province: '',
+    phone: '',
+    status: 'enable',
+  });
+  const validatePhone = (rule, value, callback) => {
+    const reg = /^1[3-9]\d{9}$/;
+    if (!value) {
+      callback(new Error('请输入负责人手机'));
+    } else if (!reg.test(value)) {
+      callback(new Error('请输入正确的手机号'));
+    } else {
+      callback();
+    }
+  };
+  const rules = ref({
+    name: { required: true, message: '请输入推广公司名称', trigger: 'blur' },
+    code: { required: true, message: '请输入推广公司编码', trigger: 'blur' },
+    adminUser: { required: true, message: '请输入负责人', trigger: 'blur' },
+    phone: [
+      { required: true, message: '请输入负责人手机', trigger: 'blur' },
+      { validator: validatePhone, trigger: 'blur' }
+    ]
+  });
+
+  const loading = ref(false);
+  const submitForm = async () => {
+    try {
+      await formRef.value.validate();
+      loading.value = true;
+
+      await saveTenant(form.value);
+      emits('success');
+      ElMessage({
+        type: 'success',
+        message: isEdit.value ? '修改成功！' : '添加成功!',
+        plain: true,
+      });
+      showModal.value = false;
+    } catch {}
+    loading.value = false;
+  };
+  const onHide = () => {
+    form.value = {
+      name: '',
+      province: '',
+      code: '',
+      adminUser: '',
+      'tenantType':'promotion',
+      phone: '',
+      status: 'enable',
+    };
+    formRef.value.clearValidate();
+    currentTenant.value = null;
+  };
+  const openModal = (role) => {
+    role && (form.value = role);
+    currentTenant.value = role;
+    showModal.value = true;
+  };
+
+  defineExpose({
+    openModal,
+  });
+</script>

src/views/system/promotionCompany/index.vue

+<template>
+  <div class="table-box">
+    <ProTable ref="proTable" :config="config" :api="getTenantPage" :paramCallback="paramCallback">
+      <template #left_buttons>
+        <el-button type="primary" :icon="Plus" @click="tenatModalRef?.openModal()">新增</el-button>
+        <el-button type="danger" :icon="Delete" @click="onDelete">删除</el-button>
+      </template>
+    </ProTable>
+
+    <TenantFormModal ref="tenatModalRef" @success="query" />
+    <!-- <AllocationUserModal ref="allocationUserModalRef" @success="query" /> -->
+  </div>
+</template>
+
+<script setup lang="jsx" name="tenantManage">
+  import { ref, reactive, onMounted } from 'vue';
+  import { Plus, Delete, Edit, Setting } from '@element-plus/icons-vue';
+  import { getTenantPage, deleteTenants } from '@/api/tenant';
+  import TenantFormModal from './components/TenantFormModal.vue';
+  import AllocationUserModal from './components/AllocationUserModal.vue';
+  import { ElMessageBox, ElMessage, ElButton, ElTag } from 'element-plus';
+  import citydata from '../../../assets/citydata';
+
+  const proTable = ref(null);
+  const tenatModalRef = ref(null);
+  const allocationUserModalRef = ref(null);
+  const paramCallback = (param) => {
+    const obj = JSON.parse(JSON.stringify(param));
+    obj['tenantType'] = 'promotion'
+    return obj;
+  };
+  const config = reactive({
+    columns: [
+      { type: 'checkbox', width: 60, fixed: 'left' },
+      { field: 'name', title: '推广公司名称', search: { el: 'input' } },
+      { field: 'code', title: '推广公司编码', search: { el: 'input' } },
+      {
+        field: 'province',
+        enum: citydata,
+        showOverflow: 'tooltip',
+        title: '省份',
+        fieldNames: { label: 'label', value: 'value' },
+        showOverflow: 'tooltip',
+        // search: { el: 'select', props: { clearable: true } },
+      },
+      { field: 'adminUser', title: '负责人' },
+      { field: 'phone', title: '负责人手机' },
+      {
+        field: '',
+        title: '成员数量',
+        width: 80,
+        slots: {
+          default: ({ row }) => {
+            return <div>{row.usersSize}</div>;
+          },
+        },
+      },
+      {
+        field: 'status',
+        title: '状态',
+        width: 80,
+        slots: {
+          default: ({ row }) => {
+            return (
+              <ElTag type={row.status == 'enable' ? 'primary' : 'danger'}>
+                {row.status == 'enable' ? '启用' : '禁用'}
+              </ElTag>
+            );
+          },
+        },
+      },
+      {
+        width: 100,
+        title: '操作',
+        fixed: 'right',
+        slots: {
+          default: ({ row }) => (
+            <>
+              <ElButton type="primary" link icon={Edit} onClick={() => handleEdit(row)}>
+                编辑
+              </ElButton>
+
+            </>
+          ),
+        },
+      },
+    ],
+  });
+
+  const query = () => proTable.value?.search();
+  const handleEdit = (row) => tenatModalRef.value.openModal(JSON.parse(JSON.stringify(row)));
+  const onDelete = async () => {
+    const list = proTable.value.element.getCheckboxRecords();
+    if (list.length > 0) {
+      await ElMessageBox.confirm('是否确认删除选中的数据？', '删除提示', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      });
+
+      const ids = list.map((v) => v.id).join(',');
+      await deleteTenants(ids);
+
+      ElMessage.success({
+        message: '删除成功',
+        plain: true,
+      });
+
+      query();
+    }
+  };
+
+  onMounted(() => {
+    query();
+  });
+</script>