123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738 |
- <template>
- <div class="app-container">
- <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
- <el-form-item label="客户类别" prop="fTypeid">
- <el-select style="width: 250px" v-model="queryParams.fTypeid" placeholder="请选择客户类别" clearable size="small">
- <el-option
- v-for="dict in fTypeidOptions"
- :key="dict.dictValue"
- :label="dict.dictLabel"
- :value="dict.dictValue"
- />
- </el-select>
- </el-form-item>
- <el-form-item label="编号" prop="fNo">
- <el-input
- v-model="queryParams.fNo"
- style="width: 250px"
- placeholder="请输入编号"
- clearable
- size="small"
- @keyup.enter.native="handleQuery"
- />
- </el-form-item>
- <el-form-item label="名称" prop="fName">
- <el-input
- v-model="queryParams.fName"
- style="width: 250px"
- placeholder="请输入名称"
- clearable
- size="small"
- @keyup.enter.native="handleQuery"
- />
- </el-form-item>
- <el-form-item label="电话" prop="fTel">
- <el-input
- v-model="queryParams.fTel"
- style="width: 250px"
- placeholder="请输入电话"
- clearable
- size="small"
- @keyup.enter.native="handleQuery"
- />
- </el-form-item>
- <el-form-item label="状态" prop="fStatus">
- <el-select
- v-model="queryParams.fStatus"
- placeholder="客户状态"
- clearable
- size="small"
- style="width: 250px"
- >
- <el-option
- v-for="dict in statusOptions"
- :key="dict.dictValue"
- :label="dict.dictLabel"
- :value="dict.dictValue"
- />
- </el-select>
- </el-form-item>
- <el-form-item>
- <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
- </el-form-item>
- </el-form>
- <el-row :gutter="10" class="mb8">
- <el-col :span="1.5">
- <el-button
- type="primary"
- icon="el-icon-plus"
- size="mini"
- @click="handleAdd"
- v-hasPermi="['basicdata/customerDetails:corps:add']"
- >新增</el-button>
- </el-col>
- <el-col :span="1.5">
- <el-button
- type="success"
- icon="el-icon-edit"
- size="mini"
- :disabled="single"
- @click="handleUpdate"
- v-hasPermi="['basicdata/customerDetails:corps:edit']"
- >修改</el-button>
- </el-col>
- <el-col :span="1.5">
- <el-button
- type="danger"
- icon="el-icon-delete"
- size="mini"
- :disabled="multiple"
- @click="handleDelete"
- v-hasPermi="['basicdata/customerDetails:corps:remove']"
- >删除</el-button>
- </el-col>
- <el-col :span="1.5">
- <el-button
- type="warning"
- icon="el-icon-download"
- size="mini"
- @click="handleExport"
- v-hasPermi="['basicdata/customerDetails:corps:export']"
- >导出</el-button>
- </el-col>
- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
- </el-row>
- <el-table v-loading="loading" :data="corpsList" @selection-change="handleSelectionChange">
- <el-table-column type="selection" width="55" align="center" />
- <el-table-column label="客户类别" align="center" prop="fTypeid" :formatter="fTypeidFormat" />
- <el-table-column label="编号" align="center" prop="fNo" />
- <el-table-column label="名称" align="center" prop="fName" />
- <el-table-column label="简称" align="center" prop="fCname" />
- <el-table-column label="英文名称" align="center" prop="fEname" />
- <el-table-column label="电话" align="center" prop="fTel" />
- <el-table-column label="录入人" align="center" prop="createBy" />
- <el-table-column label="录入时间" align="center" prop="createTime" width="180">
- <template slot-scope="scope">
- <span>{{ parseTime(scope.row.fContractb, '{y}-{m}-{d}') }}</span>
- </template>
- </el-table-column>
- <el-table-column label="修改人" align="center" prop="updateBy" />
- <el-table-column label="修改时间" align="center" prop="updateTime" width="180">
- <template slot-scope="scope">
- <span>{{ parseTime(scope.row.fContracte, '{y}-{m}-{d}') }}</span>
- </template>
- </el-table-column>
- <el-table-column label="状态" align="center" prop="fStatus" >
- <template slot-scope="scope">
- <el-switch
- v-model="scope.row.fStatus"
- active-value="0"
- inactive-value="1"
- @change="handleStatusChange(scope.row)"
- ></el-switch>
- </template>
- </el-table-column>
- <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
- <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100">
- <template slot-scope="scope">
- <el-button
- size="mini"
- type="text"
- icon="el-icon-edit"
- @click="handleUpdate(scope.row)"
- v-hasPermi="['basicdata/customerDetails:corps:edit']"
- >修改</el-button>
- <el-button
- size="mini"
- type="text"
- icon="el-icon-delete"
- @click="handleDelete(scope.row)"
- v-hasPermi="['basicdata/customerDetails:corps:remove']"
- >删除</el-button>
- </template>
- </el-table-column>
- </el-table>
- <pagination
- v-show="total>0"
- :total="total"
- :page.sync="queryParams.pageNum"
- :limit.sync="queryParams.pageSize"
- @pagination="getList"
- />
- <!-- 添加或修改客户详情对话框 -->
- <el-dialog :title="title" :visible.sync="open" close-on-click-modal="false" width="80%" :close-on-click-modal="false" append-to-body>
- <el-form ref="form" :model="form" :rules="rules" label-width="80px">
- <el-row>
- <el-col :span="8">
- <el-form-item label="客户类别" prop="fTypeid">
- <el-select style="width: 250px" v-model="form.fTypeid" placeholder="请选择客户类别">
- <el-option
- v-for="dict in fTypeidOptions"
- :key="dict.dictValue"
- :label="dict.dictLabel"
- :value="dict.dictValue"
- ></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item label="编号" prop="fNo">
- <el-input v-model="form.fNo" style="width: 250px" placeholder="请输入编号" />
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item label="名称" prop="fName">
- <el-input v-model="form.fName" style="width: 250px" placeholder="请输入名称" />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="8">
- <el-form-item label="简称" prop="fCname">
- <el-input v-model="form.fCname" style="width: 250px" placeholder="请输入简称" />
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item label="英文名称" prop="fEname">
- <el-input v-model="form.fEname" style="width: 250px" placeholder="请输入英文名称" />
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item label="电话" prop="fTel">
- <el-input v-model="form.fTel" style="width: 250px" placeholder="请输入电话" />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="8">
- <el-form-item label="传真" prop="fFax">
- <el-input v-model="form.fFax" style="width: 250px" placeholder="请输入传真" />
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item label="邮箱" prop="fEmail">
- <el-input v-model="form.fEmail" style="width: 250px" placeholder="请输入邮箱" />
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item label="联系人" prop="fManage">
- <el-input v-model="form.fManage" style="width: 250px" placeholder="请输入联系人" />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="8">
- <el-form-item label="地址" prop="fAddr">
- <el-input v-model="form.fAddr" style="width: 250px" placeholder="请输入地址" />
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item label="英文地址" prop="fEaddr">
- <el-input v-model="form.fEaddr" style="width: 250px" placeholder="请输入英文地址" />
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item label="规模" prop="fScale">
- <el-input v-model="form.fScale" style="width: 250px" placeholder="请输入规模" />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="8">
- <el-form-item label="省" prop="fProvince">
- <el-input v-model="form.fProvince" style="width: 250px" placeholder="请输入省" />
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item label="市" prop="fCity">
- <el-input v-model="form.fCity" style="width: 250px" placeholder="请输入市" />
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item label="结算方式" prop="fStltypeid">
- <el-select v-model="form.fStltypeid" style="width: 250px" placeholder="请选择结算表票结、月结">
- <el-option
- v-for="dict in fStltypeidOptions"
- :key="dict.dictValue"
- :label="dict.dictLabel"
- :value="parseInt(dict.dictValue)"
- ></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="8">
- <el-form-item label="结费天数" prop="fStldays">
- <el-input v-model="form.fStldays" style="width: 250px" placeholder="请输入结费天数" />
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item label="合同号" prop="fContractno">
- <el-input v-model="form.fContractno" style="width: 250px" placeholder="请输入合同号" />
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item label="税号" prop="fTax">
- <el-input v-model="form.fTax" style="width: 250px" placeholder="请输入税号" />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="8">
- <el-form-item label="合同起" prop="fContractb">
- <el-date-picker clearable size="small" style="width: 250px"
- v-model="form.fContractb"
- type="date"
- value-format="yyyy-MM-dd"
- placeholder="选择合同起">
- </el-date-picker>
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item label="合同至" prop="fContracte">
- <el-date-picker clearable size="small" style="width: 250px"
- v-model="form.fContracte"
- type="date"
- value-format="yyyy-MM-dd"
- placeholder="选择合同至">
- </el-date-picker>
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item label="开票电话" prop="fInvtel">
- <el-input v-model="form.fInvtel" style="width: 250px" placeholder="请输入开票电话" />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="8">
- <el-form-item label="开票地址" prop="fInvaddr">
- <el-input v-model="form.fInvaddr" style="width: 250px" placeholder="请输入开票地址" />
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item label="本位币账号" prop="fBankno">
- <el-input v-model="form.fBankno" style="width: 250px" placeholder="请输入本位币账号" />
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item label="本位币银行" prop="fBankname">
- <el-input v-model="form.fBankname" style="width: 250px" placeholder="请输入本位币银行" />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="8">
- <el-form-item label="外币账号" prop="fUbankno">
- <el-input v-model="form.fUbankno" style="width: 250px" placeholder="请输入外币账号" />
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item label="外币银行" prop="fUbankname">
- <el-input v-model="form.fUbankname" style="width: 250px" placeholder="请输入外币银行" />
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item label="状态">
- <!--<el-radio-group v-model="form.fStatus">
- <el-radio label="1">请选择字典生成</el-radio>
- </el-radio-group>-->
- <el-radio-group v-model="form.fStatus">
- <el-radio
- v-for="dict in statusOptions"
- :key="dict.dictValue"
- :label="dict.dictValue"
- >{{dict.dictLabel}}</el-radio>
- </el-radio-group>
- </el-form-item>
- </el-col>
- </el-row>
- <el-form-item label="备注" prop="remark">
- <el-input v-model="form.remark" style="width: 400px" placeholder="请输入备注" />
- </el-form-item>
- </el-form>
- <div >
- <el-row :gutter="10" class="mb8">
- <el-col :span="1.5">
- <el-button
- type="primary"
- icon="el-icon-plus"
- size="mini"
- @click="addRow(contactList)"
- >添加</el-button>
- </el-col>
- </el-row>
- </div>
- <el-table v-loading="loading" :data="contactList" @selection-change="handleSelectionChange">
- <el-table-column label="编号" align="center" prop="fNo" >
- <template scope="scope">
- <el-input v-model="scope.row.fNo" placeholder="编号" />
- </template>
- </el-table-column>
- <el-table-column label="名称" align="center" prop="fName" >
- <template scope="scope">
- <el-input v-model="scope.row.fName" placeholder="名称" />
- </template>
- </el-table-column>
- <el-table-column label="英文名称" align="center" prop="fEname">
- <template scope="scope">
- <el-input v-model="scope.row.fEname" placeholder="英文名称" />
- </template>
- </el-table-column>
- <el-table-column label="电话" align="center" prop="fTel" >
- <template scope="scope">
- <el-input v-model="scope.row.fTel" placeholder="电话" />
- </template>
- </el-table-column>
- <el-table-column label="状态" align="center" prop="fStatus" >
- <template scope="scope">
- <el-select
- v-model="scope.row.fStatus"
- placeholder="状态"
- clearable
- size="small"
- >
- <el-option
- v-for="dict in statusOptions"
- :key="dict.dictValue"
- :label="dict.dictLabel"
- :value="dict.dictValue"
- />
- </el-select>
- </template>
- </el-table-column>
- <el-table-column label="备注" align="center" prop="remark" >
- <template scope="scope">
- <el-input v-model="scope.row.remark" placeholder="备注" />
- </template>
- </el-table-column>
- <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100">
- <template slot-scope="scope">
- <el-button
- size="mini"
- type="text"
- icon="el-icon-delete"
- @click.native.prevent="deleteRow(scope.$index, contactList)"
- >删除</el-button>
- </template>
- </el-table-column>
- </el-table>
- <div slot="footer" class="dialog-footer">
- <el-button type="primary" @click="submitForm">确 定</el-button>
- <el-button @click="cancel">取 消</el-button>
- </div>
- </el-dialog>
- </div>
- </template>
- <script>
- import { listCorps, getCorps, delCorps, addCorps, updateCorps, changeCorpsStatus,exportCorps } from "@/api/basicdata/corps";
- export default {
- name: "Corps",
- components: {
- },
- data() {
- return {
- contactList:[],
- // 遮罩层
- loading: true,
- // 选中数组
- ids: [],
- // 非单个禁用
- single: true,
- // 非多个禁用
- multiple: true,
- // 显示搜索条件
- showSearch: true,
- // 总条数
- total: 0,
- // 客户详情表格数据
- corpsList: [],
- // 弹出层标题
- title: "",
- // 状态数据字典
- statusOptions: [],
- // 是否显示弹出层
- open: false,
- // 客户类别字典
- fTypeidOptions: [],
- // 结算表票结、月结字典
- fStltypeidOptions: [],
- // 删除状态字典
- delFlagOptions: [],
- // 查询参数
- queryParams: {
- pageNum: 1,
- pageSize: 10,
- fTypeid: null,
- fNo: null,
- fName: null,
- fCname: null,
- fEname: null,
- fTel: null,
- fFax: null,
- fEmail: null,
- fManage: null,
- fAddr: null,
- fEaddr: null,
- fScale: null,
- fProvince: null,
- fCity: null,
- fStltypeid: null,
- fStldays: null,
- fContractno: null,
- fContractb: null,
- fContracte: null,
- fTax: null,
- fInvtel: null,
- fInvaddr: null,
- fBankno: null,
- fBankname: null,
- fUbankno: null,
- fUbankname: null,
- fStatus: null,
- },
- // 表单参数
- form: {},
- // 表单校验
- rules: {
- fTypeid: [
- { required: true, message: "客户类别不能为空", trigger: "blur" }
- ],
- fNo: [
- { required: true, message: "编号不能为空", trigger: "blur" }
- ],
- fName: [
- { required: true, message: "名称不能为空", trigger: "blur" }
- ],
- fCname:[
- { required: true, message: "简称不能为空", trigger: "blur" }
- ],
- fStatus: [
- { required: true, message: "状态默认 T ,正常T 停用F 下拉选择不能为空", trigger: "blur" }
- ],
- }
- };
- },
- created() {
- this.getList();
- this.getDicts("data_customer_category").then(response => {
- this.fTypeidOptions = response.data;
- });
- this.getDicts("data_stltype_type").then(response => {
- this.fStltypeidOptions = response.data;
- });
- this.getDicts("data_delete_state").then(response => {
- this.delFlagOptions = response.data;
- });
- this.getDicts("sys_normal_disable").then(response => {
- this.statusOptions = response.data;
- });
- },
- methods: {
- // 添加行
- addRow(tableData,event){
- var obj = {}
- tableData.push(obj)
- },
- //删除行
- deleteRow(index, rows) {
- rows.splice(index, 1);
- },
- /** 查询客户详情列表 */
- getList() {
- this.loading = true;
- listCorps(this.queryParams).then(response => {
- this.corpsList = response.rows;
- this.total = response.total;
- this.loading = false;
- });
- },
- // 客户类别字典翻译
- fTypeidFormat(row, column) {
- return this.selectDictLabel(this.fTypeidOptions, row.fTypeid);
- },
- // 结算表票结、月结字典翻译
- fStltypeidFormat(row, column) {
- return this.selectDictLabel(this.fStltypeidOptions, row.fStltypeid);
- },
- // 删除状态字典翻译
- delFlagFormat(row, column) {
- return this.selectDictLabel(this.delFlagOptions, row.delFlag);
- },
- // 取消按钮
- cancel() {
- this.open = false;
- this.reset();
- },
- // 表单重置
- reset() {
- this.form = {
- fId: null,
- fTypeid: null,
- fNo: null,
- fName: null,
- fCname: null,
- fEname: null,
- fTel: null,
- fFax: null,
- fEmail: null,
- fManage: null,
- fAddr: null,
- fEaddr: null,
- fScale: null,
- fProvince: null,
- fCity: null,
- fStltypeid: null,
- fStldays: null,
- fContractno: null,
- fContractb: null,
- fContracte: null,
- fTax: null,
- fInvtel: null,
- fInvaddr: null,
- fBankno: null,
- fBankname: null,
- fUbankno: null,
- fUbankname: null,
- fStatus: null,
- delFlag: null,
- createBy: null,
- createTime: null,
- updateBy: null,
- updateTime: null,
- remark: null
- };
- this.resetForm("form");
- },
- // 状态修改
- handleStatusChange(row) {
- let text = row.fStatus === "0" ? "启用" : "停用";
- this.$confirm('确认要"' + text + '""' + row.fName + '"吗?', "警告", {
- confirmButtonText: "确定",
- cancelButtonText: "取消",
- type: "warning"
- }).then(function() {
- return changeCorpsStatus(row.fId, row.fStatus);
- }).then(() => {
- this.msgSuccess(text + "成功");
- }).catch(function() {
- row.fStatus = row.fStatus === "0" ? "1" : "0";
- });
- },
- /** 搜索按钮操作 */
- handleQuery() {
- this.queryParams.pageNum = 1;
- this.getList();
- },
- /** 重置按钮操作 */
- resetQuery() {
- this.resetForm("queryForm");
- this.handleQuery();
- },
- // 多选框选中数据
- handleSelectionChange(selection) {
- this.ids = selection.map(item => item.fId)
- this.single = selection.length!==1
- this.multiple = !selection.length
- },
- /** 新增按钮操作 */
- handleAdd() {
- this.reset();
- this.open = true;
- this.title = "添加客户详情";
- },
- /** 修改按钮操作 */
- handleUpdate(row) {
- this.reset();
- const fId = row.fId || this.ids
- getCorps(fId).then(response => {
- this.form = response.data["corp"];
- this.open = true;
- this.title = "修改客户详情";
- this.contactList=response.data["customerContact"];
- });
- },
- /** 提交按钮 */
- submitForm() {
- this.$refs["form"].validate(valid => {
- if (valid) {
- if (this.form.fId != null) {
- updateCorps(this.form).then(response => {
- this.msgSuccess("修改成功");
- this.open = false;
- this.getList();
- });
- } else {
- let formDate= new FormData()
- formDate.append('corps',JSON.stringify(this.form));
- formDate.append('customerContacts',JSON.stringify(this.contactList));
- addCorps(formDate).then(response => {
- this.msgSuccess("新增成功");
- this.open = false;
- this.getList();
- });
- }
- }
- });
- },
- /** 删除按钮操作 */
- handleDelete(row) {
- const fIds = row.fId || this.ids;
- this.$confirm('是否确认删除客户详情编号为"' + fIds + '"的数据项?', "警告", {
- confirmButtonText: "确定",
- cancelButtonText: "取消",
- type: "warning"
- }).then(function() {
- return delCorps(fIds);
- }).then(() => {
- this.getList();
- this.msgSuccess("删除成功");
- })
- },
- /** 导出按钮操作 */
- handleExport() {
- const queryParams = this.queryParams;
- this.$confirm('是否确认导出所有客户详情数据项?', "警告", {
- confirmButtonText: "确定",
- cancelButtonText: "取消",
- type: "warning"
- }).then(function() {
- return exportCorps(queryParams);
- }).then(response => {
- this.download(response.msg);
- })
- }
- }
- };
- </script>
|