|
@@ -10,88 +10,137 @@
|
|
|
cancel-text="取消"
|
|
|
:keyboard="false"
|
|
|
:mask-closable="false" >
|
|
|
- <a-form autocomplete="off" >
|
|
|
+ <a-form :model="dataModel" autocomplete="off" >
|
|
|
<a-divider orientation="left">基础信息管理</a-divider>
|
|
|
<a-row type="flex">
|
|
|
<a-col :span="7">
|
|
|
- <a-form-item label="驿站编号" name="SiteCode" :label-col="{span:7}">
|
|
|
- <label v-if="isDetail">{{dataModel.siteCode}}</label>
|
|
|
+ <a-form-item label="驿站编号" name="siteCode" :label-col="{span:7}" :rules="[{ required: true, message: '请输入驿站编号!' }]">
|
|
|
+ <label v-if="opCategory==3">{{dataModel.siteCode}}</label>
|
|
|
<a-input v-model:value="dataModel.siteCode" placeholder=""/>
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
- <a-col :span="7">
|
|
|
- <a-form-item label="站点名称" name="SiteName" :label-col="{span:7}">
|
|
|
- <label v-if="isDetail">{{dataModel.siteName }}</label>
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-form-item label="站点名称" name="siteName" :label-col="{span:6}" :rules="[{ required: true, message: '请输入站点名称!' }]">
|
|
|
+ <label v-if="opCategory==3">{{dataModel.siteName }}</label>
|
|
|
<a-input v-model:value="dataModel.siteName" placeholder=""/>
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
- <a-col :span="10">
|
|
|
- <a-form-item label="所属机构" name="InstitutionName" :label-col="{span:10}" >
|
|
|
- <label v-if="isDetail">{{dataModel.institutionName}}</label>
|
|
|
- <a-select v-if ="!isDetail" ref="select" v-model:value="dataModel.institutionID" :options="institutionList"
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-form-item label="所属机构" name="institutionName" :label-col="{span:6}" :rules="[{ required: true, message: '请选择所属机构!' }]">
|
|
|
+ <label v-if="opCategory==3">{{dataModel.institutionName}}</label>
|
|
|
+ <a-select ref="select" v-model:value="dataModel.institutionID" :options="institutionList"
|
|
|
:field-names="{ label: 'text', value: 'value' }" :allow-clear="true" > </a-select>
|
|
|
-<!-- <a-input v-model:value="dataModel.institutionName" placeholder=""/>-->
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
<a-row type="flex">
|
|
|
<a-col :span="7">
|
|
|
- <a-form-item label="所属县区" name="RegionCode" :label-col="{span:7}">
|
|
|
- <label v-if="isDetail">{{dataModel.regionCode}}</label>
|
|
|
- <a-select v-if ="!isDetail" ref="select" v-model:value="dataModel.regionCode" :options="regionList"
|
|
|
- :field-names="{ label: 'name', value: 'code' }" :allow-clear="true" @change="getStreetList('')" > </a-select>
|
|
|
+ <a-form-item label="所属县区" name="regionCode" :label-col="{span:7}" :rules="[{ required: true, message: '请选择所属县区!' }]">
|
|
|
+ <label v-if="opCategory==3">{{dataModel.regionCode}}</label>
|
|
|
+ <a-select ref="select" v-model:value="dataModel.regionCode" :options="regionList"
|
|
|
+ :field-names="{ label: 'name', value: 'code' }" :allow-clear="true" @change="getStreetList()" > </a-select>
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
- <a-col :span="7">
|
|
|
- <a-form-item label="所属街道" name="StreetCode" :label-col="{span:7}">
|
|
|
- <label v-if="isDetail">{{dataModel.streetCode }}</label>
|
|
|
- <a-select v-if ="!isDetail" ref="select" v-model:value="dataModel.streetCode" :options="streetList"
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-form-item label="所属街道" name="streetCode" :label-col="{span:6}" :rules="[{ required: true, message: '请选择所属街道!' }]">
|
|
|
+ <label v-if="opCategory==3">{{dataModel.streetCode }}</label>
|
|
|
+ <a-select ref="select" v-model:value="dataModel.streetCode" :options="streetList"
|
|
|
:field-names="{ label: 'name', value: 'code' }" :allow-clear="true" > </a-select>
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
- <a-col :span="10">
|
|
|
- <a-form-item label="详细地址" name="DetailAddress" :label-col="{span:10}">
|
|
|
- <label v-if="isDetail">{{dataModel.detailAddress }}</label>
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-form-item label="详细地址" name="detailAddress" :label-col="{span:6}" :rules="[{ required: true, message: '请输入详细地址!' }]">
|
|
|
+ <label v-if="opCategory==3">{{dataModel.detailAddress }}</label>
|
|
|
<a-input v-model:value="dataModel.detailAddress" placeholder=""/>
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
<a-row type="flex">
|
|
|
<a-col :span="7">
|
|
|
- <a-form-item label="站点负责人" name="FzrName" :label-col="{span:7}">
|
|
|
- <label v-if="isDetail">{{dataModel.fzrName }}</label>
|
|
|
+ <a-form-item label="站点负责人" name="fzrName" :label-col="{span:7}" :rules="[{ required: true, message: '请输入站点负责人!' }]">
|
|
|
+ <label v-if="opCategory==3">{{dataModel.fzrName }}</label>
|
|
|
<a-input v-model:value="dataModel.fzrName" placeholder=""/>
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
- <a-col :span="7">
|
|
|
- <a-form-item label="联系电话" name="FzrMobile" :label-col="{span:7}">
|
|
|
- <label v-if="isDetail">{{dataModel.fzrMobile }}</label>
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-form-item label="联系电话" name="fzrMobile" :label-col="{span:6}" :rules="[{ required: true, message: '请输入联系电话!' }]">
|
|
|
+ <label v-if="opCategory==3">{{dataModel.fzrMobile }}</label>
|
|
|
<a-input v-model:value="dataModel.fzrMobile" placeholder=""/>
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
- <a-col :span="10">
|
|
|
- <a-form-item label="驿站坐标" name="SiteXY" :label-col="{span:10}">
|
|
|
- <label v-if="isDetail">{{dataModel.sitePosition}}</label>
|
|
|
+ <a-col :span="7">
|
|
|
+ <a-form-item label="驿站坐标" name="sitePosition" :label-col="{span:7}" :rules="[{ required: true, message: '请选择驿站坐标!' }]">
|
|
|
+ <label v-if="opCategory==3">{{dataModel.sitePosition}}</label>
|
|
|
<a-input v-model:value="dataModel.sitePosition" placeholder=""/>
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
+ <a-col :span="1">
|
|
|
+ <a-button type="primary" @click='' >选择</a-button>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-divider orientation="left">管理人员 共计:{{manageUsers.length}}</a-divider>
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="24" style="text-align: right; margin-top: 20px; margin-right: 20px">
|
|
|
+ <Space>
|
|
|
+ <a-button @click="addSiteUser">
|
|
|
+ <template #icon>
|
|
|
+ <plus-circle-outlined/>
|
|
|
+ </template>
|
|
|
+ 新增
|
|
|
+ </a-button>
|
|
|
+ </Space>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row>
|
|
|
+ <a-col style="margin-bottom: 20px;">
|
|
|
+ <a-table :columns="columns" :data-source="manageUsers" :pagination="pagination"
|
|
|
+ :loading="formState.loading"
|
|
|
+ @change="handleTableChange"
|
|
|
+ :row-selection="{ selectedRowKeys: formState.selectedRowKeys, onChange: onSelectChange}"
|
|
|
+ :row-key="record=>record.siteId"
|
|
|
+ bordered>
|
|
|
+ <template #bodyCell="{ column ,index}">
|
|
|
+ <template v-if="column.key === 'name'">
|
|
|
+ <div>
|
|
|
+ <a-select
|
|
|
+ ref="select"
|
|
|
+ v-model:value="manageUsers[index][column.key]"
|
|
|
+ :options="allUsers"
|
|
|
+ @change="manageUsersChange(index,manageUsers[index][column.key])"
|
|
|
+ :field-names="{ label: 'name', value: 'siteUserID' }" style="width: 200px" >
|
|
|
+ </a-select>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-if="column.key === 'genderName'">
|
|
|
+ {{manageUsers[index][column.key]}}
|
|
|
+ </template>
|
|
|
+ <template v-if="column.key === 'roleName'">
|
|
|
+ {{manageUsers[index][column.key]}}
|
|
|
+ </template>
|
|
|
+ <template v-if="column.key === 'operation'">
|
|
|
+ <a-button type="link" size="small" @click="delSiteUser(index)">删除</a-button>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </a-table>
|
|
|
+ </a-col>
|
|
|
</a-row>
|
|
|
<a-divider orientation="left">其他信息</a-divider>
|
|
|
<a-row>
|
|
|
- <a-textarea :auto-size="{ minRows: 4, maxRows: 10 }" v-model:value="dataModel.remarkDesc" :disabled="isDetail"
|
|
|
+ <a-textarea :auto-size="{ minRows: 4, maxRows: 10 }" v-model:value="dataModel.remark" :disabled="opCategory==3"
|
|
|
placeholder="备注" style="text-align: center;" />
|
|
|
</a-row>
|
|
|
</a-form>
|
|
|
</a-modal>
|
|
|
</template>
|
|
|
<script lang="ts">
|
|
|
-import {defineComponent, reactive, ref, toRefs} from "vue";
|
|
|
+import {computed, defineComponent, reactive, ref, toRefs} from "vue";
|
|
|
import {getSiteByID, saveSite} from "@/api/baseSettings/siteInfo";
|
|
|
import BUploadFile from "@/components/file/uploadFile.vue";
|
|
|
-import {message, SelectProps} from "ant-design-vue";
|
|
|
+import {message, SelectProps, TableColumnsType, TableProps} from "ant-design-vue";
|
|
|
import {getRegionCodeList, getStreetCodeList} from "@/api/system/area/index";
|
|
|
-import {getSiteUserDataList} from "@/api/baseSettings/userInfo";
|
|
|
+import {getSiteUserList,getSiteUserDataList,getListBySiteID, getSiteUserByID} from "@/api/baseSettings/userInfo";
|
|
|
import {getInstitutionDataList} from "@/api/baseSettings/institution";
|
|
|
+import {getPaginationTotalTitle} from "@/utils/common";
|
|
|
|
|
|
interface siteModel {
|
|
|
dataModel: any;
|
|
@@ -106,32 +155,61 @@ export default defineComponent({
|
|
|
}
|
|
|
},
|
|
|
setup(props) {
|
|
|
- const formData = reactive<siteModel>({ dataModel:{}});
|
|
|
const visible = ref<boolean>(false);
|
|
|
+ const isAllowCommit = ref<boolean>(false);
|
|
|
const confirmLoading = ref<boolean>(false);
|
|
|
const title = ref();
|
|
|
- const isAllowCommit = ref<boolean>(false);
|
|
|
- const isDetail = ref<boolean>(false);
|
|
|
+ const opCategory = ref<any>();
|
|
|
const formState = reactive({
|
|
|
total: 0,
|
|
|
selectedRowKeys: [],
|
|
|
loading: false
|
|
|
});
|
|
|
+ const formData = reactive<siteModel>({ dataModel:{}});
|
|
|
+ const pageParams = reactive({
|
|
|
+ pageIndex: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ siteID:''
|
|
|
+ });
|
|
|
+ const columns: TableColumnsType = [
|
|
|
+ {title: '序号', align: "center",key: 'siteUserID',customRender: item => `${pageParams.pageSize * (pageParams.pageIndex - 1) + item.index + 1}`},
|
|
|
+ {title: '姓名', dataIndex: 'name', key: 'name', align: "center"},
|
|
|
+ {title: '性别', dataIndex: 'genderName', key: 'genderName', align: "center"},
|
|
|
+ {title: '角色', dataIndex: 'roleName', key: 'roleName', align: "center"},
|
|
|
+ {title: '操作', key: 'operation', fixed: 'right',width:170, align: "center"},
|
|
|
+ ];
|
|
|
+ const pagination = computed(() => ({
|
|
|
+ total: formState.total,
|
|
|
+ current: pageParams.pageIndex,
|
|
|
+ pageSize: pageParams.pageSize,
|
|
|
+ showSizeChanger: true,
|
|
|
+ showTotal: total => getPaginationTotalTitle(total)
|
|
|
+ }));
|
|
|
+ const onSelectChange = (selectedRowKeys: any) => {
|
|
|
+ formState.selectedRowKeys = selectedRowKeys;
|
|
|
+ };
|
|
|
+ const handleTableChange: TableProps['onChange'] = (pag: { pageSize: number; current: number },) => {
|
|
|
+ pageParams.pageIndex = pag.current;
|
|
|
+ pageParams.pageSize = pag.pageSize;
|
|
|
+ };
|
|
|
|
|
|
const regionList = ref<SelectProps['options']>();
|
|
|
const streetList = ref<SelectProps['options']>();
|
|
|
const siteUserList = ref<SelectProps['options']>();
|
|
|
const institutionList = ref<SelectProps["options"]>();
|
|
|
|
|
|
+ const manageUsers = ref<any>([]);
|
|
|
+ const allUsers = ref<any>([]);
|
|
|
+
|
|
|
const getRegionList = async function(){
|
|
|
const regionResult: any = await getRegionCodeList();
|
|
|
regionList.value = regionResult;
|
|
|
}
|
|
|
- const getStreetList = async function(regionCode: string){
|
|
|
- const streetResult: any = await getStreetCodeList(regionCode);
|
|
|
+ const getStreetList = async function(){
|
|
|
+ const streetResult: any = await getStreetCodeList(formData.dataModel.regionCode);
|
|
|
streetList.value = streetResult;
|
|
|
}
|
|
|
- const getSiteUserList = async function(){
|
|
|
+ const getUserDataList = async function(){
|
|
|
const siteUserResult :any = await getSiteUserDataList();
|
|
|
console.log('siteUserResult',siteUserResult);
|
|
|
siteUserList.value = siteUserResult;
|
|
@@ -146,41 +224,83 @@ export default defineComponent({
|
|
|
getSiteByID(siteID).then((result: any) => {
|
|
|
formData.dataModel = result;
|
|
|
console.log("dataModel",formData.dataModel);
|
|
|
+ getManageUsers(formData.dataModel.siteID);
|
|
|
if (formData.dataModel.regionCode != null){
|
|
|
- getStreetList(formData.dataModel.regionCode);
|
|
|
+ getStreetList();
|
|
|
}
|
|
|
if (formData.dataModel.siteX !=null && formData.dataModel.siteY != null){
|
|
|
formData.dataModel.sitePosition = "X:"+formData.dataModel.siteX+" Y:"+formData.dataModel.siteX;
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
-
|
|
|
- const show = (id: any,method:string,ifDetail:boolean) => {
|
|
|
- isDetail.value = ifDetail;
|
|
|
- loadData(id);
|
|
|
+ const show = (id: any,method:string,category:any) => {
|
|
|
title.value ="驿站站点管理-"+method;
|
|
|
+ opCategory.value = category;
|
|
|
+ getAllUsers();
|
|
|
+ getRegionList();
|
|
|
+ getInstitutionList();
|
|
|
+ getUserDataList();
|
|
|
+ loadData(id);
|
|
|
visible.value = true;
|
|
|
};
|
|
|
|
|
|
- const onSelectChange = (selectedRowKeys: any) => {
|
|
|
- formState.selectedRowKeys = selectedRowKeys;
|
|
|
- };
|
|
|
+ const getAllUsers = () => {
|
|
|
+ pageParams.siteID = '';
|
|
|
+ getSiteUserList(pageParams).then((result :any) => {
|
|
|
+ allUsers.value = result.list;
|
|
|
+ console.log('allUsers',allUsers);
|
|
|
+ })
|
|
|
+ }
|
|
|
+ const getManageUsers = (id: string) => {
|
|
|
+ pageParams.siteID = id;
|
|
|
+ getListBySiteID(pageParams).then((result :any)=> {
|
|
|
+ manageUsers.value = result.list;
|
|
|
+ });
|
|
|
+ }
|
|
|
|
|
|
- const validate = () => {
|
|
|
- console.log(formData.dataModel);
|
|
|
- if (formData.dataModel.siteCode==null) {
|
|
|
- message.error("请输入驿站编号!");
|
|
|
- return;
|
|
|
- }else if (formData.dataModel.detailAddress==null) {
|
|
|
- message.error("请填写详细地址!");
|
|
|
- return;
|
|
|
+ const addSiteUser = () => {
|
|
|
+ if(allUsers.value.length >0){
|
|
|
+ const newUser = allUsers.value[0];
|
|
|
+ (manageUsers.value as any[]).push({siteUserID:newUser.siteUserID,siteID:formData.dataModel.siteID,name:newUser.name,genderName:newUser.genderName,roleName:newUser.roleName});
|
|
|
+ validateSameUser();
|
|
|
+ }else{
|
|
|
+ message.error("未查询到站点信息!");
|
|
|
}
|
|
|
+ }
|
|
|
+ const delSiteUser = (site) =>{
|
|
|
+ (manageUsers.value as any[]).splice(site, 1);
|
|
|
+ validateSameUser();
|
|
|
+ }
|
|
|
+ const manageUsersChange = (index:any,siteUserID:any) =>{
|
|
|
+ console.log('siteUserID',siteUserID);
|
|
|
+ getSiteUserByID(siteUserID).then((result :any)=> {
|
|
|
+ result.siteID = formData.dataModel.siteID;
|
|
|
+ manageUsers.value[index]= result;
|
|
|
+ console.log('manageUsers',manageUsers.value);
|
|
|
+ validateSameUser();
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ const validateSameUser = ()=>{
|
|
|
isAllowCommit.value = true;
|
|
|
- };
|
|
|
+ if (manageUsers.value.length>1){
|
|
|
+ manageUsers.value.forEach(item=>{
|
|
|
+ const sameData = manageUsers.value.filter(x => x.siteUserID == item.siteUserID);
|
|
|
+ console.log("sameData",sameData);
|
|
|
+ if (sameData.length >1){
|
|
|
+ isAllowCommit.value = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (!isAllowCommit.value){
|
|
|
+ message.error("不允许添加相同的人员!");
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
const handleOk = () => {
|
|
|
- validate();
|
|
|
+ validateSameUser();
|
|
|
if (isAllowCommit.value){
|
|
|
+ formData.dataModel.manageUsers = manageUsers.value;
|
|
|
saveSite(formData.dataModel).then(result => {
|
|
|
if (result) {
|
|
|
visible.value = false;
|
|
@@ -196,31 +316,37 @@ export default defineComponent({
|
|
|
|
|
|
return {
|
|
|
...toRefs(formData),
|
|
|
+ title,
|
|
|
+ opCategory,
|
|
|
+ visible,
|
|
|
formState,
|
|
|
+ isAllowCommit,
|
|
|
+ confirmLoading,
|
|
|
+ columns,
|
|
|
+ pageParams,
|
|
|
+ pagination,
|
|
|
regionList,
|
|
|
streetList,
|
|
|
siteUserList,
|
|
|
institutionList,
|
|
|
- isAllowCommit,
|
|
|
- isDetail,
|
|
|
- visible,
|
|
|
- title,
|
|
|
- confirmLoading,
|
|
|
+ allUsers,
|
|
|
+ manageUsers,
|
|
|
show,
|
|
|
+ onSelectChange,
|
|
|
+ handleTableChange,
|
|
|
getRegionList,
|
|
|
getStreetList,
|
|
|
- getSiteUserList,
|
|
|
+ getUserDataList,
|
|
|
getInstitutionList,
|
|
|
- onSelectChange,
|
|
|
+ getAllUsers,
|
|
|
+ addSiteUser,
|
|
|
+ delSiteUser,
|
|
|
+ manageUsersChange,
|
|
|
handleOk,
|
|
|
- handleCancel,
|
|
|
- validate
|
|
|
+ handleCancel
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
- this.getRegionList();
|
|
|
- this.getInstitutionList();
|
|
|
- this.getSiteUserList();
|
|
|
},
|
|
|
})
|
|
|
</script>
|